/*
  ARQUIVO: nucleo/tg.css
  FUNCAO:  O nucleo visual do template-saas, independente de framework (HTML, React,
           Angular, Vue, Blazor). Tudo tem o prefixo tg- e fica dentro da camada
           @layer tg, entao o CSS do sistema e os utilitarios do Tailwind sobrescrevem
           sem !important.

  COMO USAR
    - Coloque class="tg" no <body> (ou no container da tela). As regras de elemento
      (fonte, h1, links, foco) so valem dentro de .tg, para nao mexer no resto do sistema.
    - Tema: troque as variaveis --tg-* (as 12 primeiras) ou use data-tg-tema="..." no
      <html> ou em qualquer container.
    - Com Tailwind 4, declare a ordem antes do @import "tailwindcss":
          @layer theme, base, tg, components, utilities;
      e importe tambem nucleo/tg-tailwind.css (cores do template como utilitarios).
    - Com CSS sem camada (Bootstrap, por exemplo), coloque esse CSS numa camada, senao
      ele vence o template mesmo com seletor mais fraco:
          @layer bootstrap, tg;
          @import url("bootstrap.min.css") layer(bootstrap);

  SECOES: tokens e temas · base (escopo .tg) · grade · icones · casca (e marca d'agua da faixa) · botoes · cartao ·
          cartao clicavel ·
          leitura de dados (lista de dados, faixa de valores, pessoa, resumo em numeros, barras, legenda) ·
          campos · campo com mascara (<tg-mascara>) · combo com pesquisa (<tg-combo>) ·
          combo de varias escolhas (<tg-combo-multi>) ·
          abas (<tg-abas>) · envio de arquivos (<tg-arquivos>) · arvore (<tg-arvore>) ·
          assistente em etapas (<tg-etapas>) · linha do tempo (<tg-linha-tempo>) ·
          contador, etiqueta e texto de situacao · tabela (linha inativa, tabela numerica, antes -> depois) · barra de progresso · nota ·
          estados · caixa de mensagem · dialogo · carregando · gaveta · janela de escolha ·
          listagem (filtros, chips, itens, selecao, paginacao, tabela em cartoes) ·
          lista de conferencia · agenda (<tg-agenda>: dia, semana, mes, arrastar) · campo de data (<tg-data>) · dica ·
          menu de acoes (<tg-acoes>) · avisos (<tg-avisos>) · quadro de tarefas (<tg-quadro>) ·
          conversa no registro (<tg-conversa>) · troca de unidade (<tg-unidade>) · busca global (<tg-busca>) ·
          paginas de estado · sem conexao e sessao · tela de entrada · densidade compacta · impressao.
          Modo escuro: data-tg-modo="escuro|auto" (variaveis no comeco).
          Marca do cliente: tg.marca({ cor, logo }) gera as variaveis; o logo entra no selo por --tg-logo.
*/

@layer tg {

/* ======================================================================
   Tokens e temas
   ====================================================================== */

:root {
    --tg-primaria: #003b5c;       /* botao principal, menu ativo, faixa do topo */
    --tg-primaria-2: #005c83;     /* hover do principal e fim do degrade da faixa */
    --tg-destaque: #00a6ce;       /* foco, marcador do menu, barra de carregando */
    --tg-ok: #17835b;
    --tg-aviso: #b7791f;
    --tg-perigo: #c63d45;
    --tg-info: #1f6fb2;
    --tg-texto: #172b3a;
    --tg-suave: #596d7a;          /* contraste de 4,5 tambem nos fundos claros de ok, info e aviso */
    --tg-linha: #dce5ea;
    --tg-fundo: #f3f7f9;
    --tg-superficie: #ffffff;

    --tg-fonte: Poppins, "Segoe UI", Arial, sans-serif;
    --tg-raio: 16px;
    --tg-raio-p: 10px;
    --tg-sombra: 0 12px 32px rgba(0, 44, 68, .14);
    --tg-sombra-p: 0 1px 3px rgba(0, 44, 68, .05), 0 6px 18px rgba(0, 44, 68, .05);
    --tg-lateral: 264px;
    --tg-lateral-recolhida: 78px;
}

[data-tg-tema="clinica"] { --tg-primaria: #0b4f4c; --tg-primaria-2: #0f766e; --tg-destaque: #14b8a6; --tg-texto: #12302e; --tg-suave: #566e6c; --tg-linha: #d6e6e4; --tg-fundo: #f2f8f7; }
[data-tg-tema="condominio"] { --tg-primaria: #1e2f6b; --tg-primaria-2: #2c46a0; --tg-destaque: #4f7cff; --tg-texto: #161d3a; --tg-suave: #606986; --tg-linha: #dde2f0; --tg-fundo: #f4f6fb; }
/* contratos: as cores da IKHON (azul-marinho e o azul do logotipo), feito para o GestaoContratos.
   A faixa vai do marinho ao azul (--tg-faixa-fim), como no site; o hover do botao fica num marinho mais claro */
[data-tg-tema="contratos"] { --tg-primaria: #001740; --tg-primaria-2: #003575; --tg-faixa-fim: #0062c0; --tg-destaque: #00a1fc; --tg-info: #0062c0; --tg-texto: #121b36; --tg-suave: #53627a; --tg-linha: #d8dfe6; --tg-fundo: #f4f7fa;
    --tg-sombra: 0 12px 32px rgba(0, 23, 64, .14); --tg-sombra-p: 0 1px 3px rgba(0, 23, 64, .05), 0 6px 18px rgba(0, 23, 64, .05); }
[data-tg-tema="quadras"] { --tg-primaria: #7a2e0e; --tg-primaria-2: #a43d10; --tg-destaque: #f97316; --tg-texto: #2b1a12; --tg-suave: #77675d; --tg-linha: #eee1d8; --tg-fundo: #fbf6f2; }

/* derivadas: recalculadas onde o tema ou o modo mudam, entao valem tambem para tema por container.
   Misturam com a --tg-superficie (e nao com branco) para o modo escuro sair certo */
:root, [data-tg-tema], [data-tg-modo] {
    --tg-realce: var(--tg-primaria);          /* texto na cor da marca (link, menu ativo) */
    --tg-primaria-claro: color-mix(in srgb, var(--tg-destaque) 14%, var(--tg-superficie));
    --tg-hover: color-mix(in srgb, var(--tg-primaria) 5%, var(--tg-superficie));
    --tg-foco: color-mix(in srgb, var(--tg-destaque) 65%, var(--tg-superficie));
    --tg-foco-halo: color-mix(in srgb, var(--tg-destaque) 14%, transparent);
    --tg-foco-fundo: color-mix(in srgb, var(--tg-destaque) 5%, var(--tg-superficie));
    --tg-ok-claro: color-mix(in srgb, var(--tg-ok) 12%, var(--tg-superficie));
    --tg-aviso-claro: color-mix(in srgb, var(--tg-aviso) 14%, var(--tg-superficie));
    --tg-perigo-claro: color-mix(in srgb, var(--tg-perigo) 11%, var(--tg-superficie));
    --tg-info-claro: color-mix(in srgb, var(--tg-info) 11%, var(--tg-superficie));
    /* texto colorido em cima do fundo claro da mesma cor (etiqueta, evento da agenda): puxado
       para a cor do texto ate dar contraste de 4,5 (WCAG AA). No escuro, o mesmo mix clareia. */
    --tg-ok-texto: color-mix(in srgb, var(--tg-ok) 85%, var(--tg-texto));
    --tg-aviso-texto: color-mix(in srgb, var(--tg-aviso) 68%, var(--tg-texto));
    --tg-perigo-texto: color-mix(in srgb, var(--tg-perigo) 90%, var(--tg-texto));
    --tg-info-texto: color-mix(in srgb, var(--tg-info) 94%, var(--tg-texto));
}

/* modo escuro: data-tg-modo="escuro" no <html> ou num container; "auto" segue o sistema.
   Troca os neutros, as cores de situacao e o realce (texto na cor da marca). A primaria da marca
   continua no fundo dos botoes e da faixa, entao os temas acima valem nos dois modos. Tema do
   proprio sistema: repita as variaveis que mudou dentro de [data-tg-modo="escuro"].
   O [data-tg-tema] de dentro entra no seletor porque o tema redefine os neutros claros */
[data-tg-modo="escuro"], [data-tg-modo="escuro"] [data-tg-tema] {
    color-scheme: dark;
    --tg-ok: #3fae80; --tg-aviso: #d9a246; --tg-perigo: #e8676f; --tg-info: #5ba4e3; --tg-ok-solido: color-mix(in srgb, var(--tg-ok) 72%, #000); --tg-perigo-solido: color-mix(in srgb, var(--tg-perigo) 78%, #000);
    --tg-texto: #e3ebf0; --tg-suave: #95a6b2; --tg-linha: #293945; --tg-fundo: #0d161d; --tg-superficie: #15202a;
    --tg-sombra: 0 12px 32px rgba(0, 0, 0, .5);
    --tg-sombra-p: 0 1px 3px rgba(0, 0, 0, .35), 0 6px 18px rgba(0, 0, 0, .25);
    --tg-realce: color-mix(in srgb, var(--tg-destaque) 70%, #fff);
    --tg-hover: color-mix(in srgb, #fff 5%, var(--tg-superficie));
    --tg-foco: color-mix(in srgb, var(--tg-destaque) 80%, var(--tg-superficie));
    --tg-foco-fundo: color-mix(in srgb, var(--tg-destaque) 8%, var(--tg-superficie));
}
@media (prefers-color-scheme: dark) {
    [data-tg-modo="auto"], [data-tg-modo="auto"] [data-tg-tema] {
        color-scheme: dark;
        --tg-ok: #3fae80; --tg-aviso: #d9a246; --tg-perigo: #e8676f; --tg-info: #5ba4e3; --tg-ok-solido: color-mix(in srgb, var(--tg-ok) 72%, #000); --tg-perigo-solido: color-mix(in srgb, var(--tg-perigo) 78%, #000);
        --tg-texto: #e3ebf0; --tg-suave: #95a6b2; --tg-linha: #293945; --tg-fundo: #0d161d; --tg-superficie: #15202a;
        --tg-sombra: 0 12px 32px rgba(0, 0, 0, .5);
        --tg-sombra-p: 0 1px 3px rgba(0, 0, 0, .35), 0 6px 18px rgba(0, 0, 0, .25);
        --tg-realce: color-mix(in srgb, var(--tg-destaque) 70%, #fff);
        --tg-hover: color-mix(in srgb, #fff 5%, var(--tg-superficie));
        --tg-foco: color-mix(in srgb, var(--tg-destaque) 80%, var(--tg-superficie));
        --tg-foco-fundo: color-mix(in srgb, var(--tg-destaque) 8%, var(--tg-superficie));
}
}

/* ======================================================================
   Base: so dentro de .tg (zero especificidade, qualquer regra do sistema vence)
   ====================================================================== */

:where(.tg), :where(.tg) *, :where(.tg) *::before, :where(.tg) *::after { box-sizing: border-box; }
:where(.tg) { color: var(--tg-texto); font: 14px/1.5 var(--tg-fonte); -webkit-font-smoothing: antialiased; }
:where(body.tg) { margin: 0; background: var(--tg-fundo); }
:where(.tg) :is(h1, h2, h3, h4, p) { margin: 0; }
:where(.tg) h1 { font-size: 24px; line-height: 1.2; font-weight: 600; letter-spacing: -.02em; }
:where(.tg) h2 { font-size: 16.5px; line-height: 1.3; font-weight: 500; letter-spacing: -.01em; }
:where(.tg) h3 { font-size: 14.5px; line-height: 1.4; font-weight: 500; }
/* negrito do texto (<b>, <strong>) em 600: o padrao do navegador (bolder) dava 700, pesado demais na Poppins */
:where(.tg) :is(b, strong) { font-weight: 600; }
:where(.tg) a { color: inherit; text-decoration: none; }
:where(.tg) :is(button, input, select, textarea) { font: inherit; color: inherit; }
:where(.tg) button { cursor: pointer; }
:where(.tg) code { font-family: Consolas, "Cascadia Code", monospace; font-size: .92em; }
:where(.tg) :focus-visible { outline: 2px solid var(--tg-destaque); outline-offset: 2px; }
:where(.tg) [id] { scroll-margin-top: 84px; }

.tg-suave { color: var(--tg-suave); }
.tg-pequeno { font-size: 12px; }
.tg-esconder { display: none !important; }
.tg-so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ======================================================================
   Grade e alinhamento
   ====================================================================== */

.tg-pilha { display: grid; gap: 16px; }
.tg-linha { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.tg-linha.fim { justify-content: flex-end; }
.tg-linha.entre { justify-content: space-between; }
.tg-grade { display: grid; gap: 18px; grid-template-columns: repeat(var(--tg-colunas, 2), minmax(0, 1fr)); }
.tg-grade-3 { --tg-colunas: 3; }
.tg-grade-4 { --tg-colunas: 4; }
.tg-ocupa-2 { grid-column: span 2; }
@media (max-width: 1100px) { .tg-grade-3, .tg-grade-4 { --tg-colunas: 2; } }
@media (max-width: 640px) { .tg-grade { --tg-colunas: 1; gap: 14px; } .tg-grade-4 { --tg-colunas: 2; } .tg-ocupa-2 { grid-column: auto; } }

/* ======================================================================
   Icones: <i class="tg-ico tg-i-nome"></i>, pintados com a cor do texto
   ====================================================================== */

.tg-ico { display: inline-block; flex: none; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--tg-i) center / contain no-repeat; mask: var(--tg-i) center / contain no-repeat; }
.tg-i-casa { --tg-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'><path d='m3 11 9-8 9 8v10h-6v-6H9v6H3z'/></svg>"); }
.tg-i-menu { --tg-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'><path d='M4 6h16M4 12h16M4 18h16'/></svg>"); }
.tg-i-mais { --tg-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>"); }
.tg-i-menos { --tg-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><path d='M5 12h14'/></svg>"); }
.tg-i-arquivo { --tg-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/><path d='M14 3v5h5'/></svg>"); }
.tg-i-nova-aba { --tg-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M14 4h6v6M20 4l-9 9'/><path d='M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/></svg>"); }
.tg-i-lupa { --tg-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-4-4'/></svg>"); }
.tg-i-sino { --tg-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'><path d='M6 16v-5a6 6 0 1 1 12 0v5l2 2H4zM10 21h4'/></svg>"); }
.tg-i-voltar { --tg-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m15 6-6 6 6 6'/></svg>"); }
.tg-i-avancar { --tg-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m9 6 6 6-6 6'/></svg>"); }
.tg-i-seta { --tg-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m7 9 5 5 5-5'/></svg>"); }
.tg-i-check { --tg-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12 5 5 9-10'/></svg>"); }
.tg-i-x { --tg-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><path d='M6 6l12 12M18 6 6 18'/></svg>"); }
.tg-i-alerta { --tg-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'><path d='M12 3 2 21h20L12 3zm0 7v4m0 3v.5'/></svg>"); }
.tg-i-info { --tg-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'><circle cx='12' cy='12' r='9'/><path d='M12 11v6M12 7.5v.5'/></svg>"); }
.tg-i-erro { --tg-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'><circle cx='12' cy='12' r='9'/><path d='m9 9 6 6m0-6-6 6'/></svg>"); }
.tg-i-lixeira { --tg-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3'/></svg>"); }
.tg-i-editar { --tg-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='m4 20 4-1 11-11-3-3L5 16l-1 4zM14 7l3 3'/></svg>"); }
.tg-i-olho { --tg-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'><path d='M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z'/><circle cx='12' cy='12' r='3'/></svg>"); }
.tg-i-calendario { --tg-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'><rect x='3' y='5' width='18' height='16' rx='2'/><path d='M3 10h18M8 3v4M16 3v4'/></svg>"); }
.tg-i-usuario { --tg-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'><circle cx='12' cy='8' r='4'/><path d='M4 21a8 8 0 0 1 16 0'/></svg>"); }
.tg-i-usuarios { --tg-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'><circle cx='9' cy='8' r='3.5'/><path d='M2 20a7 7 0 0 1 14 0M16 4.5a3.5 3.5 0 0 1 0 7M18 13.5a6 6 0 0 1 4 6.5'/></svg>"); }
.tg-i-config { --tg-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'><circle cx='12' cy='12' r='3.2'/><path d='M12 2.5v3M12 18.5v3M2.5 12h3M18.5 12h3M5.3 5.3l2.1 2.1M16.6 16.6l2.1 2.1M18.7 5.3l-2.1 2.1M7.4 16.6l-2.1 2.1'/></svg>"); }
.tg-i-sair { --tg-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M14 4h5v16h-5M9 8l-4 4 4 4M5 12h11'/></svg>"); }
.tg-i-relogio { --tg-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v5l3 2'/></svg>"); }
.tg-i-baixar { --tg-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 4v11m0 0-4-4m4 4 4-4M5 19h14'/></svg>"); }
.tg-i-filtro { --tg-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'><path d='M4 5h16l-6 8v6l-4-2v-4z'/></svg>"); }
.tg-i-video { --tg-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'><rect x='3' y='6' width='13' height='12' rx='2'/><path d='m16 10 5-3v10l-5-3z'/></svg>"); }
.tg-i-camera { --tg-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'><path d='M4 8a2 2 0 0 1 2-2h2l1.5-2h5L16 6h2a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z'/><circle cx='12' cy='13' r='3.5'/></svg>"); }
.tg-i-pasta { --tg-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'><path d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/></svg>"); }
.tg-i-doc { --tg-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'><path d='M6 3h8l5 5v13H6zM14 3v5h5M9 13h7M9 17h7'/></svg>"); }
.tg-i-grafico { --tg-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'><path d='M4 20V4M4 20h16M8 16v-4M12 16V8M16 16v-6'/></svg>"); }
.tg-i-dinheiro { --tg-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'><rect x='2.5' y='6' width='19' height='12' rx='2'/><circle cx='12' cy='12' r='2.5'/><path d='M6 9v.5M18 14.5v.5'/></svg>"); }
.tg-i-recolher { --tg-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='16' rx='2'/><path d='M9 4v16M16 10l-2 2 2 2'/></svg>"); }
.tg-i-tema { --tg-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'><path d='M12 3a9 9 0 1 0 0 18c1.5 0 2-1 2-2s-1-1.5-1-2.5 1-1.5 2-1.5h2a4 4 0 0 0 4-4c0-4.5-4-8-9-8z'/><circle cx='7.5' cy='11' r='1'/><circle cx='10' cy='7' r='1'/><circle cx='15' cy='7.5' r='1'/></svg>"); }
.tg-i-ajuda { --tg-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'><circle cx='12' cy='12' r='9'/><path d='M9.5 9.5a2.5 2.5 0 1 1 3.6 2.2c-.7.4-1.1.9-1.1 1.8M12 17v.4'/></svg>"); }
.tg-i-mais-acoes { --tg-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><circle cx='5' cy='12' r='2'/><circle cx='12' cy='12' r='2'/><circle cx='19' cy='12' r='2'/></svg>"); }
.tg-i-imprimir { --tg-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'><path d='M7 9V4h10v5M7 17H4V9h16v8h-3M7 14h10v6H7z'/></svg>"); }
.tg-i-cadeado { --tg-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'><rect x='5' y='11' width='14' height='9' rx='2'/><path d='M8 11V8a4 4 0 0 1 8 0v3'/></svg>"); }
.tg-i-local { --tg-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'><path d='M12 21s7-5 7-12a7 7 0 10-14 0c0 7 7 12 7 12z'/><circle cx='12' cy='9' r='2'/></svg>"); }
.tg-i-sol { --tg-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'><circle cx='12' cy='12' r='4'/><path d='M12 2.5v2M12 19.5v2M2.5 12h2M19.5 12h2M5.3 5.3l1.4 1.4M17.3 17.3l1.4 1.4M18.7 5.3l-1.4 1.4M6.7 17.3l-1.4 1.4'/></svg>"); }
.tg-i-lua { --tg-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'><path d='M20 14.5A8 8 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5z'/></svg>"); }
.tg-i-chave { --tg-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='8' cy='15' r='4.5'/><path d='m11.5 11.5 9-9M17 6l3 3M14.5 8.5l2 2'/></svg>"); }
.tg-i-copiar { --tg-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'><rect x='8' y='8' width='12' height='12' rx='2'/><path d='M16 8V5a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h3'/></svg>"); }
.tg-i-anexo { --tg-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='m20.5 11.5-8.3 8.3a5 5 0 0 1-7.1-7.1l8.6-8.6a3.4 3.4 0 0 1 4.8 4.8l-8.6 8.6a1.7 1.7 0 0 1-2.4-2.4l7.9-7.9'/></svg>"); }
.tg-i-enviar { --tg-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M21 3 10 14M21 3l-7 18-4-7-7-4z'/></svg>"); }
/* lua no claro, sol no escuro: o botao de alternar mostra o modo para onde vai */
.tg-i-modo { --tg-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'><path d='M20 14.5A8 8 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5z'/></svg>"); }
[data-tg-modo="escuro"] .tg-i-modo { --tg-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'><circle cx='12' cy='12' r='4'/><path d='M12 2.5v2M12 19.5v2M2.5 12h2M19.5 12h2M5.3 5.3l1.4 1.4M17.3 17.3l1.4 1.4M18.7 5.3l-1.4 1.4M6.7 17.3l-1.4 1.4'/></svg>"); }
@media (prefers-color-scheme: dark) { [data-tg-modo="auto"] .tg-i-modo { --tg-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'><circle cx='12' cy='12' r='4'/><path d='M12 2.5v2M12 19.5v2M2.5 12h2M19.5 12h2M5.3 5.3l1.4 1.4M17.3 17.3l1.4 1.4M18.7 5.3l-1.4 1.4M6.7 17.3l-1.4 1.4'/></svg>"); } }
.tg-i-predio { --tg-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 21V5l8-2v18M12 7h8v14M2 21h20M7 8h2M7 12h2M7 16h2M15 11h2M15 15h2'/></svg>"); }
.tg-i-trocar { --tg-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M8 4v16M8 4 4.5 7.5M8 4l3.5 3.5M16 20V4M16 20l-3.5-3.5M16 20l3.5-3.5'/></svg>"); }
.tg-i-sem-rede { --tg-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M2 8.8a15 15 0 0 1 4.4-2.7M10 5.1A15 15 0 0 1 22 8.8M5 12.6a10 10 0 0 1 5.2-2.5M15.6 10.6A10 10 0 0 1 19 12.6M8.5 16.1a5 5 0 0 1 7 0M12 20h.01M3 3l18 18'/></svg>"); }
.tg-i-ferramenta { --tg-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M14.7 6.3a4 4 0 0 0 5 5L21 12.6a6 6 0 0 1-7.9 2.1l-6.4 6.4a2.1 2.1 0 0 1-3-3l6.4-6.4A6 6 0 0 1 12.2 3.8l1.3 1.3a4 4 0 0 0 1.2 1.2z'/></svg>"); }
.tg-i-mapa { --tg-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/><circle cx='12' cy='9.5' r='2.5'/></svg>"); }

/* ======================================================================
   Casca: menu lateral, topo, faixa, conteudo, barra inferior (celular)
   ====================================================================== */

/* fundo proprio: com class="tg" num container (e nao no body), a casca nao herda o fundo do body */
.tg-casca { display: grid; grid-template-columns: var(--tg-lateral) minmax(0, 1fr); min-height: 100vh; background: var(--tg-fundo); transition: grid-template-columns .2s ease; }

.tg-lateral { position: sticky; top: 0; z-index: 30; display: flex; flex-direction: column; gap: 4px; height: 100vh; padding: 18px 14px 14px; overflow-x: hidden; overflow-y: auto; background: var(--tg-superficie); border-right: 1px solid var(--tg-linha); scrollbar-width: thin; }
.tg-lateral > * { flex-shrink: 0; }

.tg-marca { display: flex; align-items: center; gap: 11px; padding: 0 6px 16px; }
.tg-marca-selo { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border-radius: 14px; background: var(--tg-primaria); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .02em; box-shadow: 0 8px 20px color-mix(in srgb, var(--tg-primaria) 28%, transparent); }
.tg-marca-nome { min-width: 0; }
.tg-marca-nome b { display: block; overflow: hidden; color: var(--tg-realce); font-size: 16px; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; }
.tg-marca-nome small { display: block; overflow: hidden; color: var(--tg-suave); font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
/* logo do cliente (tg.marca({ logo }) ou --tg-logo + data-tg-logo no <html>): fundo branco, para logo de
   qualquer cor sair bem nos dois modos; a sigla continua no HTML para o leitor de tela */
[data-tg-logo] .tg-marca-selo { padding: 5px; border: 1px solid var(--tg-linha); background: #fff var(--tg-logo) center / contain no-repeat; background-origin: content-box; color: transparent; font-size: 0; box-shadow: var(--tg-sombra-p); }
[data-tg-logo] .tg-entrada-marca .tg-marca-selo { border-color: transparent; background-color: #fff; }

.tg-lateral-criar { width: 100%; height: 46px; margin-bottom: 12px; border-radius: 14px; }

.tg-menu { display: grid; gap: 2px; }
.tg-menu-item { position: relative; display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 9px 12px; border-radius: 12px; color: var(--tg-suave); font-size: 13.5px; font-weight: 400; white-space: nowrap; list-style: none; cursor: pointer; transition: background .15s, color .15s; }
.tg-menu-item::-webkit-details-marker { display: none; }
.tg-menu-item > .tg-ico { width: 21px; height: 21px; }
.tg-menu-texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tg-menu-item:hover { background: var(--tg-hover); color: var(--tg-realce); }
.tg-menu-item.ativo { background: var(--tg-primaria-claro); color: var(--tg-realce); font-weight: 500; }
.tg-menu-item.ativo::before { content: ""; position: absolute; left: -14px; top: 9px; bottom: 9px; width: 4px; border-radius: 0 4px 4px 0; background: var(--tg-destaque); }
.tg-menu-item > .tg-menu-seta { width: 14px; height: 14px; opacity: .6; transition: transform .18s; }
.tg-menu-sub[open] > .tg-menu-item .tg-menu-seta { transform: rotate(180deg); }
.tg-menu-sub-lista { display: grid; gap: 1px; margin: 2px 0 6px 22px; padding-left: 12px; border-left: 2px solid var(--tg-linha); }
.tg-menu-sub-lista a { padding: 7px 10px; border-radius: 9px; color: var(--tg-suave); font-size: 13px; }
.tg-menu-sub-lista a:hover { background: var(--tg-hover); color: var(--tg-realce); }
.tg-menu-sub-lista a.ativo { background: var(--tg-primaria-claro); color: var(--tg-realce); font-weight: 500; }
.tg-menu-grupo { margin: 16px 12px 6px; color: var(--tg-suave); font-size: 10px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }

.tg-lateral-usuario { display: flex; align-items: center; gap: 11px; margin-top: auto; padding: 11px; border: 1px solid var(--tg-linha); border-radius: 16px; background: linear-gradient(135deg, var(--tg-primaria-claro), var(--tg-superficie)); }
.tg-usuario-nome { flex: 1; min-width: 0; }
.tg-usuario-nome b { display: block; overflow: hidden; color: var(--tg-realce); font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }
.tg-usuario-nome small { display: block; overflow: hidden; color: var(--tg-suave); font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.tg-usuario-sair { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 10px; color: var(--tg-suave); }
.tg-usuario-sair:hover { background: var(--tg-superficie); color: var(--tg-perigo); }

.tg-avatar { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 13px; background: var(--tg-primaria); color: #fff; font-size: 13px; font-weight: 500; }
.tg-avatar-p { flex-basis: 32px; width: 32px; height: 32px; border-radius: 10px; font-size: 11.5px; }

.tg-area { display: flex; flex-direction: column; min-width: 0; }

.tg-topo { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; height: 64px; padding: 0 28px; background: var(--tg-superficie); border-bottom: 1px solid var(--tg-linha); }
/* largura alem do flex-basis: o Safari (WebKit) mede o grupo pelo conteudo do botao (so o icone),
   e no iPhone os botoes do topo vazavam da tela e alargavam a pagina */
.tg-topo-botao { position: relative; display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; border: 1px solid var(--tg-linha); border-radius: 12px; background: var(--tg-superficie); color: var(--tg-suave); transition: background .15s, color .15s; }
.tg-topo-botao:hover { background: var(--tg-hover); color: var(--tg-realce); }
.tg-topo-ponto { position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; border: 2px solid var(--tg-superficie); border-radius: 10px; background: var(--tg-perigo); color: #fff; font-size: 10px; font-weight: 500; line-height: 15px; text-align: center; }
.tg-topo-busca { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; max-width: 520px; height: 40px; padding: 0 12px 0 14px; border: 1px solid var(--tg-linha); border-radius: 12px; background: var(--tg-fundo); color: var(--tg-suave); transition: border-color .15s, box-shadow .15s, background .15s; }
.tg-topo-busca:focus-within { border-color: var(--tg-foco); background: var(--tg-foco-fundo); box-shadow: 0 0 0 3px var(--tg-foco-halo); }
.tg-topo-busca .tg-ico { width: 18px; height: 18px; }
.tg-topo-busca input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--tg-texto); }
.tg-topo-busca kbd { padding: 1px 7px; border: 1px solid var(--tg-linha); border-radius: 6px; background: var(--tg-superficie); color: var(--tg-suave); font: 11px var(--tg-fonte); }
.tg-topo-acoes { display: flex; flex: none; align-items: center; gap: 10px; margin-left: auto; }

/* faixa de titulo: seta de voltar, "Modulo · Tela", titulo, botao de novo e texto de apoio */
.tg-faixa { position: relative; overflow: clip; padding: 26px 32px 66px; background: linear-gradient(120deg, var(--tg-primaria) 0%, var(--tg-faixa-fim, var(--tg-primaria-2)) 100%); color: #fff; }
.tg-faixa::after { content: ""; position: absolute; right: -90px; top: -140px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--tg-destaque) 45%, transparent), transparent 68%); pointer-events: none; }
.tg-faixa-linha { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; }
.tg-faixa-voltar { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, .24); border-radius: 12px; background: rgba(255, 255, 255, .12); color: #fff; }
.tg-faixa-voltar:hover { background: rgba(255, 255, 255, .22); }
.tg-faixa-titulo { flex: 1 1 200px; min-width: 0; }   /* sem espaco, os botoes descem para a linha de baixo */
.tg-faixa-titulo small { display: block; margin-bottom: 2px; font-size: 12px; opacity: .78; }
.tg-faixa-titulo h1 { color: #fff; }
.tg-faixa-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.tg-faixa > p { position: relative; z-index: 1; max-width: 720px; margin-top: 10px; opacity: .84; }

/* marca d'agua da faixa: um desenho em traco branco bem claro, girado, atras do titulo.
   <section class="tg-faixa" data-tg-marca="documento">; os nomes estao logo abaixo. Desenho
   proprio: data-tg-marca com style="--tg-marca: url(...)". isolation + z-index -1: o desenho
   fica em cima do degrade e embaixo do titulo, sem mexer no z-index de quem esta dentro */
.tg-faixa[data-tg-marca] { isolation: isolate; }
.tg-faixa[data-tg-marca]::before { content: ""; position: absolute; z-index: -1; top: -22px; right: clamp(40px, 24%, 340px); width: 250px; height: 208px; pointer-events: none; background: var(--tg-marca) center / contain no-repeat; }
@media (max-width: 640px) { .tg-faixa[data-tg-marca]::before { right: -60px; width: 200px; height: 167px; opacity: .5; } }
[data-tg-marca="calendario"] { --tg-marca: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 300'><g transform='rotate(12 210 150)' stroke='%23fff' stroke-linejoin='round'><rect x='104' y='58' width='176' height='220' rx='16' fill='%23fff' fill-opacity='.025' stroke-opacity='.08' stroke-width='2'/><rect x='132' y='34' width='180' height='212' rx='16' fill='%23fff' fill-opacity='.055' stroke-opacity='.18' stroke-width='2'/><path d='M132 84H312' fill='none' stroke-opacity='.22' stroke-width='2'/><g fill='%23fff' fill-opacity='.09' stroke-opacity='.2' stroke-width='2'><rect x='170' y='18' width='12' height='34' rx='6'/><rect x='262' y='18' width='12' height='34' rx='6'/><rect x='156' y='104' width='28' height='24' rx='5'/><rect x='200' y='104' width='28' height='24' rx='5'/><rect x='244' y='104' width='28' height='24' rx='5'/><rect x='156' y='146' width='28' height='24' rx='5'/><rect x='244' y='146' width='28' height='24' rx='5'/><rect x='156' y='188' width='28' height='24' rx='5'/><rect x='200' y='188' width='28' height='24' rx='5'/></g><rect x='200' y='146' width='28' height='24' rx='5' fill='%23fff' fill-opacity='.06' stroke-opacity='.3' stroke-width='3'/></g></svg>"); }
[data-tg-marca="controles"] { --tg-marca: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 300'><g transform='rotate(12 210 150)' stroke='%23fff' stroke-linejoin='round'><rect x='140' y='36' width='100' height='250' rx='26' fill='%23fff' fill-opacity='.025' stroke-opacity='.08' stroke-width='2'/><rect x='166' y='18' width='100' height='250' rx='26' fill='%23fff' fill-opacity='.055' stroke-opacity='.18' stroke-width='2'/><g fill='%23fff' fill-opacity='.09' stroke-opacity='.2' stroke-width='2'><circle cx='216' cy='66' r='27'/><circle cx='216' cy='143' r='27'/></g><circle cx='216' cy='220' r='27' fill='%23fff' fill-opacity='.06' stroke-opacity='.22' stroke-width='2'/><path d='M148 66H166M266 66H284M148 143H166M266 143H284M148 220H166M266 220H284' fill='none' stroke-opacity='.2' stroke-width='4' stroke-linecap='round'/></g></svg>"); }
[data-tg-marca="documento"] { --tg-marca: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 300'><g transform='rotate(12 210 150)' stroke='%23fff' stroke-linejoin='round'><path d='M100 48H244L284 88V288H100Z' fill='%23fff' fill-opacity='.025' stroke-opacity='.08' stroke-width='2'/><path d='M132 18H266L310 62V264H132Z' fill='%23fff' fill-opacity='.055' stroke-opacity='.18' stroke-width='2'/><path d='M266 18V62H310' fill='%23fff' fill-opacity='.06' stroke-opacity='.22' stroke-width='2'/><path d='M160 96H278M160 120H278M160 144H252M160 184H278M160 208H278M160 232H226' fill='none' stroke-opacity='.16' stroke-width='4' stroke-linecap='round'/></g></svg>"); }
[data-tg-marca="documento-novo"] { --tg-marca: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 300'><g transform='rotate(12 210 150)' stroke='%23fff' stroke-linejoin='round'><path d='M100 48H244L284 88V288H100Z' fill='%23fff' fill-opacity='.025' stroke-opacity='.08' stroke-width='2'/><path d='M132 18H266L310 62V264H132Z' fill='%23fff' fill-opacity='.055' stroke-opacity='.18' stroke-width='2'/><path d='M266 18V62H310' fill='%23fff' fill-opacity='.06' stroke-opacity='.22' stroke-width='2'/><path d='M160 96H278M160 120H278M160 144H240M160 184H210' fill='none' stroke-opacity='.16' stroke-width='4' stroke-linecap='round'/><circle cx='270' cy='222' r='40' fill='%23fff' fill-opacity='.09' stroke-opacity='.2' stroke-width='2'/><path d='M270 200V244M248 222H292' fill='none' stroke-opacity='.26' stroke-width='6' stroke-linecap='round'/></g></svg>"); }
[data-tg-marca="engrenagem"] { --tg-marca: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 300'><g transform='rotate(12 210 150)' stroke='%23fff' stroke-linejoin='round'><path d='M300 186L311 175L321 178L323 193L330 198L345 198L350 207L341 220L342 228L353 239L350 249L335 251L330 258L330 273L321 278L308 269L300 270L289 281L279 278L277 263L270 258L255 258L250 249L259 236L258 228L247 217L250 207L265 205L270 198L270 183L279 178L292 187Z' fill='%23fff' fill-opacity='.025' stroke-opacity='.08' stroke-width='2'/><path d='M208 54L224 33L240 37L245 63L256 70L282 62L292 75L281 99L286 111L311 120L312 136L289 149L286 161L301 183L292 197L266 194L256 202L255 229L240 235L221 217L208 218L192 239L176 235L171 209L160 202L134 210L124 197L135 173L130 161L105 152L104 136L127 123L130 111L115 89L124 75L150 78L160 70L161 43L176 37L195 55Z' fill='%23fff' fill-opacity='.055' stroke-opacity='.18' stroke-width='2'/><circle cx='208' cy='136' r='34' fill='%23fff' fill-opacity='.06' stroke-opacity='.22' stroke-width='2'/><circle cx='300' cy='228' r='16' fill='%23fff' fill-opacity='.06' stroke-opacity='.22' stroke-width='2'/></g></svg>"); }
[data-tg-marca="grafico"] { --tg-marca: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 300'><g transform='rotate(12 210 150)' stroke='%23fff' stroke-linejoin='round'><path d='M100 48H244L284 88V288H100Z' fill='%23fff' fill-opacity='.025' stroke-opacity='.08' stroke-width='2'/><path d='M132 18H266L310 62V264H132Z' fill='%23fff' fill-opacity='.055' stroke-opacity='.18' stroke-width='2'/><path d='M266 18V62H310' fill='%23fff' fill-opacity='.06' stroke-opacity='.22' stroke-width='2'/><path d='M160 92H240M160 114H212M152 242H292' fill='none' stroke-opacity='.16' stroke-width='4' stroke-linecap='round'/><g fill='%23fff' fill-opacity='.09' stroke-opacity='.2' stroke-width='2'><rect x='162' y='192' width='22' height='48' rx='3'/><rect x='196' y='164' width='22' height='76' rx='3'/><rect x='230' y='180' width='22' height='60' rx='3'/><rect x='264' y='146' width='22' height='94' rx='3'/></g></g></svg>"); }
[data-tg-marca="lupa"] { --tg-marca: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 300'><g transform='rotate(12 210 150)' stroke='%23fff' stroke-linejoin='round'><path d='M100 48H244L284 88V288H100Z' fill='%23fff' fill-opacity='.025' stroke-opacity='.08' stroke-width='2'/><path d='M132 18H266L310 62V264H132Z' fill='%23fff' fill-opacity='.055' stroke-opacity='.18' stroke-width='2'/><path d='M266 18V62H310' fill='%23fff' fill-opacity='.06' stroke-opacity='.22' stroke-width='2'/><path d='M160 96H278M160 120H278M160 144H228' fill='none' stroke-opacity='.16' stroke-width='4' stroke-linecap='round'/><circle cx='250' cy='198' r='42' fill='%23fff' fill-opacity='.06' stroke-opacity='.22' stroke-width='2'/><circle cx='250' cy='198' r='30' fill='none' stroke-opacity='.14' stroke-width='2'/><path d='M281 229L318 266' fill='none' stroke-opacity='.22' stroke-width='12' stroke-linecap='round'/></g></svg>"); }
[data-tg-marca="organograma"] { --tg-marca: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 300'><g transform='rotate(12 210 150)' stroke='%23fff' stroke-linejoin='round'><rect x='170' y='20' width='96' height='50' rx='10' fill='%23fff' fill-opacity='.055' stroke-opacity='.18' stroke-width='2'/><path d='M218 70V104M148 104H288M148 104V132M288 104V132M148 182V206M118 206H178M118 206V226M178 206V226' fill='none' stroke-opacity='.18' stroke-width='3' stroke-linecap='round'/><rect x='100' y='132' width='96' height='50' rx='10' fill='%23fff' fill-opacity='.055' stroke-opacity='.18' stroke-width='2'/><rect x='240' y='132' width='96' height='50' rx='10' fill='%23fff' fill-opacity='.025' stroke-opacity='.08' stroke-width='2'/><g fill='%23fff' fill-opacity='.09' stroke-opacity='.2' stroke-width='2'><rect x='94' y='226' width='48' height='36' rx='8'/><rect x='154' y='226' width='48' height='36' rx='8'/></g><path d='M192 40H244M122 152H174M262 152H314' fill='none' stroke-opacity='.16' stroke-width='4' stroke-linecap='round'/></g></svg>"); }
[data-tg-marca="pasta"] { --tg-marca: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 300'><g transform='rotate(12 210 150)' stroke='%23fff' stroke-linejoin='round'><path d='M112 40H278V276H112Z' fill='%23fff' fill-opacity='.025' stroke-opacity='.1' stroke-width='2'/><path d='M120 34H286V270H120ZM128 28H294V264H128Z' fill='none' stroke-opacity='.15' stroke-width='2'/><path d='M98 20H170L186 38H302V282H98Z' fill='%23fff' fill-opacity='.065' stroke-opacity='.2' stroke-width='2'/><path d='M122 38V282' fill='none' stroke-opacity='.22' stroke-width='3'/><rect x='150' y='92' width='124' height='90' rx='4' fill='%23fff' fill-opacity='.035' stroke-opacity='.19' stroke-width='2'/><path d='M168 112H256M168 132H240M168 160H220M106 82H134M106 220H134' fill='none' stroke-opacity='.2' stroke-width='4' stroke-linecap='round'/></g></svg>"); }
[data-tg-marca="pessoas"] { --tg-marca: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 300'><g transform='rotate(12 210 150)' stroke='%23fff' stroke-linejoin='round'><circle cx='166' cy='112' r='34' fill='%23fff' fill-opacity='.025' stroke-opacity='.08' stroke-width='2'/><path d='M104 252C104 198 132 170 166 170C200 170 228 198 228 252Z' fill='%23fff' fill-opacity='.025' stroke-opacity='.08' stroke-width='2'/><circle cx='236' cy='96' r='40' fill='%23fff' fill-opacity='.055' stroke-opacity='.18' stroke-width='2'/><path d='M164 254C164 192 196 158 236 158C276 158 308 192 308 254Z' fill='%23fff' fill-opacity='.055' stroke-opacity='.18' stroke-width='2'/><path d='M206 208H266M216 230H256' fill='none' stroke-opacity='.16' stroke-width='4' stroke-linecap='round'/><circle cx='292' cy='70' r='17' fill='%23fff' fill-opacity='.09' stroke-opacity='.2' stroke-width='2'/></g></svg>"); }
[data-tg-marca="prancheta"] { --tg-marca: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 300'><g transform='rotate(12 210 150)' stroke='%23fff' stroke-linejoin='round'><rect x='104' y='50' width='180' height='240' rx='14' fill='%23fff' fill-opacity='.025' stroke-opacity='.08' stroke-width='2'/><rect x='128' y='26' width='180' height='240' rx='14' fill='%23fff' fill-opacity='.055' stroke-opacity='.18' stroke-width='2'/><rect x='184' y='12' width='68' height='30' rx='8' fill='%23fff' fill-opacity='.09' stroke-opacity='.2' stroke-width='2'/><path d='M156 80H280M156 104H280M156 128H246M178 170H280M178 200H258' fill='none' stroke-opacity='.16' stroke-width='4' stroke-linecap='round'/><g fill='%23fff' fill-opacity='.06' stroke-opacity='.22' stroke-width='2'><circle cx='162' cy='170' r='6'/><circle cx='162' cy='200' r='6'/></g><path d='M196 238q12-16 24 0t24 0t24 0' fill='none' stroke-opacity='.2' stroke-width='3' stroke-linecap='round'/></g></svg>"); }
[data-tg-marca="predio"] { --tg-marca: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 300'><g transform='rotate(12 210 150)' stroke='%23fff' stroke-linejoin='round'><path d='M122 76H222V288H122Z' fill='%23fff' fill-opacity='.025' stroke-opacity='.08' stroke-width='2'/><path d='M148 50H248V270H148Z' fill='%23fff' fill-opacity='.055' stroke-opacity='.18' stroke-width='2'/><path d='M248 120H312V270H248Z' fill='%23fff' fill-opacity='.06' stroke-opacity='.22' stroke-width='2'/><g fill='%23fff' fill-opacity='.09' stroke-opacity='.2' stroke-width='2'><rect x='168' y='78' width='18' height='20' rx='3'/><rect x='210' y='78' width='18' height='20' rx='3'/><rect x='168' y='118' width='18' height='20' rx='3'/><rect x='210' y='118' width='18' height='20' rx='3'/><rect x='168' y='158' width='18' height='20' rx='3'/><rect x='210' y='158' width='18' height='20' rx='3'/><rect x='168' y='198' width='18' height='20' rx='3'/><rect x='210' y='198' width='18' height='20' rx='3'/><rect x='264' y='146' width='16' height='18' rx='3'/><rect x='264' y='186' width='16' height='18' rx='3'/></g><rect x='186' y='232' width='24' height='38' rx='3' fill='%23fff' fill-opacity='.06' stroke-opacity='.22' stroke-width='2'/><path d='M118 270H336' fill='none' stroke-opacity='.2' stroke-width='4' stroke-linecap='round'/></g></svg>"); }
[data-tg-marca="sino"] { --tg-marca: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 300'><g transform='rotate(12 210 150)' stroke='%23fff' stroke-linejoin='round'><path d='M215 52C170 52 152 90 152 128V176L132 206H298L278 176V128C278 90 260 52 215 52Z' transform='translate(-34 26)' fill='%23fff' fill-opacity='.025' stroke-opacity='.08' stroke-width='2'/><path d='M215 52C170 52 152 90 152 128V176L132 206H298L278 176V128C278 90 260 52 215 52Z' fill='%23fff' fill-opacity='.055' stroke-opacity='.18' stroke-width='2'/><circle cx='215' cy='42' r='9' fill='%23fff' fill-opacity='.06' stroke-opacity='.22' stroke-width='2'/><path d='M194 220a21 21 0 0 0 42 0' fill='%23fff' fill-opacity='.06' stroke-opacity='.22' stroke-width='2'/><path d='M174 132C174 108 186 90 204 84M302 96Q318 120 302 144M318 82Q344 120 318 158' fill='none' stroke-opacity='.16' stroke-width='4' stroke-linecap='round'/><circle cx='264' cy='70' r='17' fill='%23fff' fill-opacity='.09' stroke-opacity='.2' stroke-width='2'/></g></svg>"); }
[data-tg-marca="tarefas"] { --tg-marca: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 300'><g transform='rotate(12 210 150)' stroke='%23fff' stroke-linejoin='round'><path d='M100 48H244L284 88V288H100Z' fill='%23fff' fill-opacity='.025' stroke-opacity='.08' stroke-width='2'/><path d='M132 18H266L310 62V264H132Z' fill='%23fff' fill-opacity='.055' stroke-opacity='.18' stroke-width='2'/><path d='M266 18V62H310' fill='%23fff' fill-opacity='.06' stroke-opacity='.22' stroke-width='2'/><g fill='%23fff' fill-opacity='.09' stroke-opacity='.2' stroke-width='2'><rect x='154' y='88' width='28' height='28' rx='6'/><rect x='154' y='144' width='28' height='28' rx='6'/></g><rect x='154' y='200' width='28' height='28' rx='6' fill='%23fff' fill-opacity='.06' stroke-opacity='.22' stroke-width='2'/><path d='M161 102l6 6 10-12M161 158l6 6 10-12' fill='none' stroke-opacity='.24' stroke-width='4' stroke-linecap='round'/><path d='M198 102H286M198 158H270M198 214H286' fill='none' stroke-opacity='.16' stroke-width='4' stroke-linecap='round'/></g></svg>"); }

.tg-conteudo { position: relative; z-index: 1; display: grid; gap: 18px; margin-top: -42px; padding: 0 32px 40px; }
/* 0.23.0: tela sem faixa (página de estado, por exemplo): o conteúdo não sobe para baixo do topo */
.tg-topo + .tg-conteudo { margin-top: 0; padding-top: 24px; }

.tg-barra-inferior { position: fixed; left: 0; right: 0; bottom: 0; z-index: 22; display: none; align-items: flex-end; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: var(--tg-superficie); border-top: 1px solid var(--tg-linha); box-shadow: 0 -6px 20px rgba(0, 44, 68, .07); }
.tg-barra-inferior > a, .tg-barra-inferior > button { position: relative; display: grid; justify-items: center; gap: 2px; flex: 1; padding: 6px 2px; border: 0; border-radius: 12px; background: none; color: var(--tg-suave); font-size: 10.5px; font-weight: 400; }
.tg-barra-inferior > .ativo { background: var(--tg-primaria-claro); color: var(--tg-realce); font-weight: 500; }
.tg-barra-inferior .tg-bi-novo span { display: grid; place-items: center; width: 46px; height: 46px; margin-top: -24px; border: 4px solid var(--tg-superficie); border-radius: 16px; background: var(--tg-primaria); color: #fff; box-shadow: 0 8px 18px color-mix(in srgb, var(--tg-primaria) 30%, transparent); }
.tg-barra-inferior .tg-topo-ponto { top: 0; right: calc(50% - 22px); }

.tg-veu { position: fixed; inset: 0; z-index: 25; display: none; background: rgba(10, 25, 35, .45); opacity: 0; transition: opacity .2s; }

@media (min-width: 861px) {
    .tg-so-celular { display: none !important; }
    .tg-menu-recolhido .tg-casca { grid-template-columns: var(--tg-lateral-recolhida) minmax(0, 1fr); }
    .tg-menu-recolhido .tg-lateral { padding-inline: 12px; }
    .tg-menu-recolhido .tg-marca { justify-content: center; padding-inline: 0; }
    .tg-menu-recolhido :is(.tg-marca-nome, .tg-menu-texto, .tg-menu-seta, .tg-menu-grupo, .tg-lateral-criar span, .tg-usuario-nome, .tg-usuario-sair, .tg-menu-sub-lista) { display: none; }
    .tg-menu-recolhido .tg-menu-grupo + * { margin-top: 10px; }
    .tg-menu-recolhido .tg-lateral-criar { padding: 0; }
    .tg-menu-recolhido .tg-menu-item { justify-content: center; padding-inline: 0; }
    .tg-menu-recolhido .tg-menu-item.ativo::before { left: -12px; }
    .tg-menu-recolhido .tg-menu-item .tg-conta { position: absolute; top: 3px; right: 4px; min-width: 17px; padding: 0 4px; font-size: 9px; }
    .tg-menu-recolhido .tg-lateral-usuario { justify-content: center; padding: 6px 0; border: 0; background: none; }
}

@media (max-width: 860px) {
    .tg-so-computador { display: none !important; }
    .tg-casca { grid-template-columns: minmax(0, 1fr); }
    .tg-lateral { position: fixed; left: 0; top: 0; bottom: 0; width: min(300px, 86vw); transform: translateX(-104%); transition: transform .22s ease; box-shadow: var(--tg-sombra); }
    .tg-menu-aberto .tg-lateral { transform: none; }
    .tg-veu { display: block; pointer-events: none; }
    .tg-menu-aberto .tg-veu { opacity: 1; pointer-events: auto; }
    .tg-menu-aberto body { overflow: hidden; }
    .tg-topo { height: 58px; padding: 0 16px; }
    .tg-topo-busca kbd { display: none; }
    .tg-faixa { padding: 20px 16px 58px; }
    .tg-faixa h1 { font-size: 21px; }
    .tg-faixa-linha { flex-wrap: wrap; }
    .tg-conteudo { gap: 14px; padding: 0 16px 100px; }
    .tg-barra-inferior { display: flex; }
}

/* ======================================================================
   Botoes
   ====================================================================== */

.tg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border: 1px solid transparent; border-radius: 12px; background: var(--tg-superficie); color: var(--tg-texto); font-family: var(--tg-fonte); font-size: 13.5px; font-weight: 500; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; user-select: none; transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .05s; }
.tg-btn:active { transform: translateY(1px); }
.tg-btn .tg-ico { width: 18px; height: 18px; }
.tg-btn-primario { background: var(--tg-primaria); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--tg-primaria) 22%, transparent); }
.tg-btn-primario:hover { background: var(--tg-primaria-2); color: #fff; }
.tg-btn-secundario { border-color: var(--tg-linha); color: var(--tg-realce); }
.tg-btn-secundario:hover { border-color: var(--tg-foco); background: var(--tg-hover); }
/* --tg-ok-solido e --tg-perigo-solido: fundo com texto branco. No escuro as cores clareiam e o fundo
   solido escurece, para o texto branco manter o contraste de 4,5 */
.tg-btn-ok { background: var(--tg-ok-solido, var(--tg-ok)); color: #fff; }
.tg-btn-ok:hover { background: color-mix(in srgb, var(--tg-ok-solido, var(--tg-ok)) 85%, #000); }
.tg-btn-perigo { background: var(--tg-perigo-solido, var(--tg-perigo)); color: #fff; }
.tg-btn-perigo:hover { background: color-mix(in srgb, var(--tg-perigo-solido, var(--tg-perigo)) 85%, #000); color: #fff; }
.tg-btn-texto { padding-inline: 10px; background: transparent; color: var(--tg-realce); }
.tg-btn-texto:hover { background: var(--tg-hover); }
.tg-btn-branco { background: #fff; color: var(--tg-primaria); box-shadow: 0 6px 16px rgba(0, 0, 0, .12); }
.tg-btn-branco:hover { background: var(--tg-primaria-claro); }
.tg-btn-claro { border-color: rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .14); color: #fff; }
.tg-btn-claro:hover { background: rgba(255, 255, 255, .24); color: #fff; }

.tg-btn-p { height: 32px; padding: 0 12px; border-radius: 10px; font-size: 12.5px; }
.tg-btn-g { height: 48px; padding: 0 22px; border-radius: 14px; font-size: 14.5px; }
.tg-btn-bloco { width: 100%; }
.tg-btn-icone { width: 40px; padding: 0; }
.tg-btn-p.tg-btn-icone { width: 32px; }
.tg-btn-p .tg-ico { width: 16px; height: 16px; }
/* excluir: vermelho no icone, fundo vermelho e icone branco no hover */
.tg-btn-lixeira { color: var(--tg-perigo); }
.tg-btn-lixeira:hover, .tg-btn-lixeira:focus-visible { background: var(--tg-perigo); color: #fff; }

.tg-btn:disabled, .tg-btn[aria-disabled="true"] { opacity: .5; pointer-events: none; box-shadow: none; }
/* durante a chamada ao servidor: gira e nao aceita outro clique */
.tg-btn.carregando { pointer-events: none; opacity: .85; }
.tg-btn.carregando > .tg-ico { display: none; }
.tg-btn.carregando::before { content: ""; flex: none; width: 15px; height: 15px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: tg-girar .7s linear infinite; }
@keyframes tg-girar { to { transform: rotate(360deg); } }

.tg-barra-botoes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--tg-linha); }
@media (max-width: 640px) { .tg-barra-botoes .tg-btn { flex: 1; } }

/* ======================================================================
   Cartao, cartao clicavel e indicador
   ====================================================================== */

.tg-cartao { min-width: 0; background: var(--tg-superficie); border: 1px solid var(--tg-linha); border-radius: var(--tg-raio); box-shadow: var(--tg-sombra-p); }
.tg-cartao-cab { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--tg-linha); }
.tg-cartao-cab > div:first-child { flex: 1; min-width: 0; }
.tg-cartao-cab p { margin-top: 2px; color: var(--tg-suave); font-size: 12.5px; }
.tg-cartao-corpo { padding: 20px; }
.tg-cartao-corpo.sem-espaco { padding: 0; }
.tg-cartao-rodape { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--tg-linha); }
@media (max-width: 640px) { .tg-cartao-cab, .tg-cartao-corpo, .tg-cartao-rodape { padding-inline: 16px; } .tg-cartao-cab { flex-wrap: wrap; } .tg-cartao-cab > div:first-child { flex: 1 1 200px; } }

.tg-indicador { display: flex; align-items: center; gap: 14px; padding: 18px; }
.tg-indicador-ico { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 14px; background: var(--tg-primaria-claro); color: var(--tg-realce); }
.tg-indicador-ico.ok { background: var(--tg-ok-claro); color: var(--tg-ok); }
.tg-indicador-ico.aviso { background: var(--tg-aviso-claro); color: var(--tg-aviso); }
.tg-indicador-ico.perigo { background: var(--tg-perigo-claro); color: var(--tg-perigo); }
.tg-indicador b { display: block; font-size: 22px; font-weight: 600; line-height: 1.15; }
.tg-indicador small { display: block; color: var(--tg-suave); font-size: 12.5px; }
/* cartao clicavel (A15): o cartao inteiro e <a class="tg-cartao" href> (indicador que abre a lista
   que o compoe) ou, quando o cartao tem outros botoes, o link principal leva tg-cartao-link e
   cobre o cartao (os outros botoes ficam por cima). Borda e sombra no mouse; no toque, sem o
   pulo, que ficaria preso depois do toque. O :where deixa o display do tg-indicador valer */
:where(a.tg-cartao) { display: block; }
a.tg-cartao, .tg-cartao:has(.tg-cartao-link) { position: relative; color: inherit; transition: border-color .15s, box-shadow .15s, transform .15s; }
.tg-cartao-link { color: inherit; }
.tg-cartao-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.tg-cartao:has(.tg-cartao-link) :is(a, button, input, select, textarea, label, tg-acoes):not(.tg-cartao-link) { position: relative; z-index: 2; }
.tg-cartao-link:focus-visible { outline: 0; }
.tg-cartao:has(.tg-cartao-link:focus-visible) { outline: 2px solid var(--tg-destaque); outline-offset: 2px; }
@media (hover: hover) {
    :is(a.tg-cartao, .tg-cartao:has(.tg-cartao-link)):hover { border-color: var(--tg-foco); box-shadow: var(--tg-sombra); transform: translateY(-1px); }
}
a.tg-cartao:active, .tg-cartao:has(.tg-cartao-link:active) { background: var(--tg-hover); }
@media (prefers-reduced-motion: reduce) { :is(a.tg-cartao, .tg-cartao:has(.tg-cartao-link)):hover { transform: none; } }

@media (max-width: 640px) { .tg-indicador { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; } .tg-indicador-ico { width: 40px; height: 40px; border-radius: 12px; } .tg-indicador b { font-size: 19px; } }

/* ======================================================================
   Leitura de dados: lista de dados, faixa de valores, pessoa, resumo em numeros, barras
   horizontais e legenda de grafico (A06, A07, A09, A13, A14)
   ====================================================================== */

/* lista de dados (ficha do registro):
   <dl class="tg-dados"><div><dt>Cliente</dt><dd>Prefeitura de Niteroi<small>CNPJ 28.521.748/0001-59</small></dd></div></dl>
   As colunas se ajustam a largura (--tg-dados-coluna, padrao 160px). "duas" fixa duas colunas, que
   viram uma no celular; <div class="inteira"> ocupa a linha toda (observacao longa) */
.tg-dados { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--tg-dados-coluna, 160px), 100%), 1fr)); gap: 14px 20px; margin: 0; }
.tg-dados > div { min-width: 0; }
.tg-dados > .inteira { grid-column: 1 / -1; }
.tg-dados dt { color: var(--tg-suave); font-size: 11.5px; font-weight: 500; letter-spacing: .02em; }
/* anywhere: e-mail e numero de processo nao tem onde quebrar e alargavam a coluna */
.tg-dados dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.tg-dados dd small { display: block; margin-top: 2px; color: var(--tg-suave); font-size: 12px; }
.tg-dados dd:empty::before { content: "—"; color: var(--tg-suave); }
.tg-dados.duas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* no celular a coluna minima cai para 140px: cabem duas, e a ficha nao vira uma tira comprida */
@media (max-width: 640px) { .tg-dados { grid-template-columns: repeat(auto-fit, minmax(min(var(--tg-dados-coluna, 140px), 100%), 1fr)); } .tg-dados.duas { grid-template-columns: minmax(0, 1fr); } }

/* faixa de valores: <div class="tg-valores"><a href="..."><small>Valor atual</small><b>R$ 1.250.000,00</b><em>com 2 aditivos</em></a>...</div>.
   Cada valor e <div> ou <a>. A linha entre os valores e sombra para a esquerda e para cima: a da
   borda some no overflow, entao a faixa pode quebrar em quantas linhas for sem sobrar traco */
.tg-valores { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--tg-valores-coluna, 160px), 100%), 1fr)); min-width: 0; overflow: hidden; border: 1px solid var(--tg-linha); border-radius: var(--tg-raio); background: var(--tg-superficie); }
.tg-valores > * { display: grid; align-content: start; gap: 2px; min-width: 0; padding: 16px 20px; box-shadow: -1px 0 0 var(--tg-linha), 0 -1px 0 var(--tg-linha); color: inherit; }
.tg-valores > a { transition: background .15s; }
.tg-valores > a:hover { background: var(--tg-hover); }
.tg-valores > a:focus-visible { outline-offset: -3px; }
.tg-valores small { color: var(--tg-suave); font-size: 12px; font-weight: 500; }
.tg-valores b { font-size: 18px; font-weight: 600; line-height: 1.3; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tg-valores em { color: var(--tg-suave); font-size: 11.5px; font-style: normal; }
/* compacta: dentro de gaveta ou de cartao estreito */
.tg-valores.compacta { grid-template-columns: repeat(auto-fit, minmax(min(var(--tg-valores-coluna, 120px), 100%), 1fr)); border-radius: var(--tg-raio-p); }
.tg-valores.compacta > * { padding: 10px 14px; }
.tg-valores.compacta b { font-size: 15px; }
@media (max-width: 640px) {
    .tg-valores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tg-valores > * { padding: 12px 14px; }
    .tg-valores b { font-size: 16px; }
    .tg-valores.compacta b { font-size: 14.5px; }
}

/* pessoa: <span class="tg-pessoa"><span class="tg-avatar tg-avatar-p">AS</span><span>Ana Souza<small>Gerente do contrato</small></span></span>
   Pode ser <a>. Em lista: <ul class="tg-pessoas"><li class="tg-pessoa">...</li></ul>, uma embaixo
   da outra; "lado" poe uma ao lado da outra. O avatar tambem pode ser <img class="tg-avatar"> */
.tg-pessoa { display: inline-flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; vertical-align: middle; }
.tg-pessoa > :last-child { min-width: 0; line-height: 1.35; }
.tg-pessoa small { display: block; overflow: hidden; color: var(--tg-suave); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
a.tg-pessoa { margin: -4px -6px; padding: 4px 6px; border-radius: 12px; color: inherit; transition: background .15s; }
a.tg-pessoa:hover { background: var(--tg-hover); }
.tg-pessoas { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.tg-pessoas > .tg-pessoa { display: flex; }
.tg-pessoas.lado { display: flex; flex-wrap: wrap; gap: 10px 28px; }
/* na lista ha lugar: o cargo longo quebra a linha em vez de cortar (o corte fica para a tabela) */
.tg-pessoas small { white-space: normal; }
img.tg-avatar { object-fit: cover; }

/* resumo em numeros (A14): <div class="tg-numeros"><a href="..." class="perigo"><b>3</b><small>Atrasados</small></a>...</div>.
   Numero grande no meio de cada caixa; a cor do item vale so para o numero (verde e informacao,
   vermelho e pendencia). Cada item e <div> ou <a>, e pode levar uma tg-progresso entre o numero e
   o texto. As caixas se ajustam a largura (--tg-numeros-coluna, 96px): tres cabem no celular */
.tg-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--tg-numeros-coluna, 96px), 100%), 1fr)); gap: 10px; }
.tg-numeros > * { display: grid; align-content: center; gap: 2px; min-width: 0; padding: 14px 12px; border: 1px solid var(--tg-linha); border-radius: 12px; color: inherit; text-align: center; }
.tg-numeros > a { transition: border-color .15s, background .15s; }
.tg-numeros > a:hover { border-color: var(--tg-foco); background: var(--tg-hover); }
.tg-numeros b { font-size: 24px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tg-numeros small { color: var(--tg-suave); font-size: 12px; }
.tg-numeros > .ok b { color: var(--tg-ok); }
.tg-numeros > .info b { color: var(--tg-info); }
.tg-numeros > .aviso b { color: color-mix(in srgb, var(--tg-aviso) 80%, var(--tg-texto)); }
.tg-numeros > .perigo b { color: var(--tg-perigo); }
.tg-numeros .tg-progresso { margin: 6px 0 2px; }
@media (max-width: 640px) { .tg-numeros > * { padding: 12px 8px; } .tg-numeros b { font-size: 21px; } }

/* barras horizontais (A13): grafico pequeno, sem biblioteca, para cartao de painel.
   <div class="tg-barras"><a href="..."><span>Obras</span>
       <span class="tg-barras-trilho" role="img" aria-label="Executado R$ 1,2 mi, saldo R$ 0,8 mi">
           <i style="--tg-barra:60%"></i><i class="destaque" style="--tg-barra:40%"></i></span>
       <b>R$ 2,0 mi</b></a>...</div>
   Rotulo, trilho e valor; cada linha e <div> ou <a>. Uma parte por serie: a tela calcula a
   largura (--tg-barra, do total da linha ou do maior valor da lista). A cor vem da classe
   (destaque, ok, aviso, perigo, info, suave; sem classe, a da marca) ou de --tg-cor. No celular, o
   trilho desce para baixo do rotulo */
/* as linhas sao subgrade da lista: o valor mais largo alinha o fim de todos os trilhos. O rotulo
   fica com ate 40% da largura, para o trilho nao sumir no cartao estreito do painel */
.tg-barras { display: grid; grid-template-columns: minmax(0, min(var(--tg-barras-rotulo, 150px), 40%)) minmax(0, 1fr) auto; gap: 4px 12px; min-width: 0; }
.tg-barras > * { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: center; row-gap: 4px; min-width: 0; margin-inline: -6px; padding: 5px 6px; border-radius: 8px; color: inherit; }
.tg-barras > a { transition: background .15s; }
.tg-barras > a:hover { background: var(--tg-hover); }
.tg-barras > * > :first-child { overflow: hidden; font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }
.tg-barras > * > :last-child:not(.tg-barras-trilho) { font-size: 12.5px; font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.tg-barras-trilho { display: flex; height: 10px; overflow: hidden; border-radius: 5px; background: color-mix(in srgb, var(--tg-suave) 16%, var(--tg-superficie)); }
/* o trilho mistura o suave: com a primaria, sumia no modo escuro.
   A fresta branca entre as partes separa as series sem depender so da cor */
.tg-barras-trilho i { flex: none; width: clamp(0%, var(--tg-barra, 0%), 100%); height: 100%; background: var(--tg-cor); transition: width .3s ease; }
.tg-barras-trilho i + i { box-shadow: inset 2px 0 0 var(--tg-superficie); }
@media (max-width: 640px) {
    .tg-barras { grid-template-columns: minmax(0, 1fr) auto; }
    .tg-barras-trilho { grid-row: 2; grid-column: 1 / -1; }
}

/* cores das series, iguais na barra e na legenda. A primaria da marca e escura demais no modo
   escuro: a serie sem classe usa o realce, que clareia la */
:is(.tg-barras-trilho, .tg-legenda.grafico) i { --tg-cor: var(--tg-realce); }
:is(.tg-barras-trilho, .tg-legenda.grafico) i.destaque { --tg-cor: var(--tg-destaque); }
:is(.tg-barras-trilho, .tg-legenda.grafico) i.ok { --tg-cor: var(--tg-ok); }
:is(.tg-barras-trilho, .tg-legenda.grafico) i.aviso { --tg-cor: var(--tg-aviso); }
:is(.tg-barras-trilho, .tg-legenda.grafico) i.perigo { --tg-cor: var(--tg-perigo); }
:is(.tg-barras-trilho, .tg-legenda.grafico) i.info { --tg-cor: var(--tg-info); }
:is(.tg-barras-trilho, .tg-legenda.grafico) i.suave { --tg-cor: color-mix(in srgb, var(--tg-suave) 55%, var(--tg-superficie)); }

/* legenda de grafico (A13): <figcaption class="tg-legenda grafico"><span><i class="ok"></i>Pago</span>...</figcaption>.
   A mesma tg-legenda da agenda, com a marca cheia na cor da serie; "linha" vira traco (grafico
   de linhas) e "tracejado", traco partido (o previsto). Serve tambem embaixo de um ECharts.
   O "span i" passa na frente das cores da legenda da agenda, que vem depois no arquivo */
.tg-legenda.grafico { gap: 6px 16px; margin-top: 10px; }
.tg-legenda.grafico span i { width: 10px; height: 10px; border: 0; border-radius: 3px; background: var(--tg-cor); }
.tg-legenda.grafico span i:is(.linha, .tracejado) { width: 16px; height: 3px; border-radius: 2px; }
.tg-legenda.grafico span i.tracejado { background: repeating-linear-gradient(90deg, var(--tg-cor) 0 4px, transparent 4px 7px); }

/* ======================================================================
   Campos
   ====================================================================== */

.tg-form { display: grid; gap: 16px; }
.tg-campo { display: grid; gap: 6px; align-content: start; min-width: 0; }
.tg-campo > label, .tg-campo-rotulo { color: var(--tg-texto); font-size: 12.5px; font-weight: 500; }
.tg-obrig::after { content: " *"; color: var(--tg-perigo); }
.tg-campo :is(input:not([type="checkbox"], [type="radio"]), select, textarea):not(tg-combo *, tg-combo-multi *) { width: 100%; height: 42px; margin: 0; padding: 5px 13px; border: 1px solid var(--tg-linha); border-radius: var(--tg-raio-p); outline: 0; background: var(--tg-superficie); color: var(--tg-texto); font: 14px var(--tg-fonte); transition: border-color .15s, box-shadow .15s, background .15s; }
.tg-campo textarea { height: auto; min-height: 96px; padding: 10px 13px; line-height: 1.5; resize: vertical; }
/* a seta precisa da mesma especificidade da regra geral acima, que zera o fundo com o atalho
   background; com so ".tg-campo select" ela perdia e a lista ficava sem seta (0.21.2) */
.tg-campo select:not([multiple], [size]):not(tg-combo *, tg-combo-multi *) { padding-right: 38px; appearance: none; background: var(--tg-superficie) url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667986' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m7 9 5 5 5-5'/></svg>") right 12px center / 16px no-repeat; }
.tg-campo ::placeholder { color: color-mix(in srgb, var(--tg-suave) 65%, var(--tg-superficie)); }
/* campo em foco: borda, halo e fundo claro (o combo com pesquisa segue igual) */
.tg-campo :is(input, select, textarea):not(tg-combo *, tg-combo-multi *):focus { border-color: var(--tg-foco); background-color: var(--tg-foco-fundo); box-shadow: 0 0 0 3px var(--tg-foco-halo); }
.tg-campo :is(input, select, textarea):not(tg-combo *, tg-combo-multi *):disabled { background-color: var(--tg-fundo); color: var(--tg-suave); }
.tg-campo-ajuda { color: var(--tg-suave); font-size: 12px; }
.tg-campo-erro { display: none; align-items: center; gap: 5px; color: var(--tg-perigo); font-size: 12px; font-weight: 400; }
.tg-campo-erro::before { content: ""; flex: none; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v6M12 16.5v.5'/></svg>") center / contain no-repeat; mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v6M12 16.5v.5'/></svg>") center / contain no-repeat; }
.tg-campo.invalido :is(input, select, textarea, .tg-combo-gatilho):not(.tg-combo-busca input), .tg-campo :is(input, select, textarea):not(tg-combo *, tg-combo-multi *):user-invalid { border-color: var(--tg-perigo); box-shadow: 0 0 0 3px var(--tg-perigo-claro); background-color: var(--tg-superficie); }
.tg-campo.invalido .tg-campo-erro { display: flex; }
.tg-campo.invalido .tg-campo-ajuda { display: none; }
/* senha com olho: <div class="tg-senha"><input type="password"><button type="button" class="tg-senha-olho"></button></div>.
   O [type] da a especificidade para vencer o padding do campo comum (.tg-campo :is(...):not(...)) */
.tg-senha { position: relative; }
.tg-campo .tg-senha > input[type] { padding-right: 46px; }
/* o Edge desenha um olho proprio no campo de senha; com o nosso, ficariam dois */
.tg-senha > input::-ms-reveal, .tg-senha > input::-ms-clear { display: none; }
.tg-senha-olho { position: absolute; top: 4px; right: 5px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--tg-suave); }
.tg-senha-olho::before { content: ""; width: 19px; height: 19px; background: currentColor; -webkit-mask: var(--tg-i) center / contain no-repeat; mask: var(--tg-i) center / contain no-repeat;
    --tg-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'><path d='M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z'/><circle cx='12' cy='12' r='3'/></svg>"); }
.tg-senha-olho[aria-pressed="true"]::before { --tg-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'><path d='M10.6 5.1A10 10 0 0 1 12 5c6 0 10 7 10 7a17 17 0 0 1-2.9 3.6M6.6 6.6C3.9 8.3 2 12 2 12s4 7 10 7c1.9 0 3.6-.7 5-1.6M9.9 9.9a3 3 0 0 0 4.2 4.2M3 3l18 18'/></svg>"); }
.tg-senha-olho:hover { background: var(--tg-hover); color: var(--tg-texto); }
.tg-senha-olho:disabled { opacity: .45; cursor: default; }
.tg-senha-caps { display: flex; align-items: center; gap: 5px; margin-top: 6px; color: var(--tg-aviso-texto); font-size: 12px; font-weight: 500; }
.tg-senha-caps .tg-ico { width: 14px; height: 14px; }
/* forca da senha: <input type="password" data-tg-forca="8"> (o tg.js desenha embaixo da caixa) */
.tg-forca { --tg-f-cor: var(--tg-linha); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; }
.tg-forca[data-nivel="1"] { --tg-f-cor: var(--tg-perigo); }
.tg-forca[data-nivel="2"] { --tg-f-cor: var(--tg-aviso); }
.tg-forca[data-nivel="3"] { --tg-f-cor: var(--tg-info); }
.tg-forca[data-nivel="4"] { --tg-f-cor: var(--tg-ok); }
.tg-forca-barra { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.tg-forca-barra span { height: 4px; border-radius: 2px; background: var(--tg-linha); transition: background .2s; }
.tg-forca[data-nivel="1"] .tg-forca-barra span:nth-child(-n+1),
.tg-forca[data-nivel="2"] .tg-forca-barra span:nth-child(-n+2),
.tg-forca[data-nivel="3"] .tg-forca-barra span:nth-child(-n+3),
.tg-forca[data-nivel="4"] .tg-forca-barra span { background: var(--tg-f-cor); }
.tg-forca-nivel { color: var(--tg-f-cor); font-size: 12px; font-weight: 500; }
.tg-forca-regras { display: flex; flex-wrap: wrap; gap: 4px 14px; grid-column: 1 / -1; margin: 0; padding: 0; list-style: none; color: var(--tg-suave); font-size: 12px; }
.tg-forca-regras li { display: inline-flex; align-items: center; gap: 5px; }
.tg-forca-regras li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tg-linha); }
.tg-forca-regras li.ok { color: var(--tg-ok); }
.tg-forca-regras li.ok::before { background: var(--tg-ok); }

.tg-marcar { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; }
.tg-marcar input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--tg-primaria); cursor: pointer; }
.tg-interruptor { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.tg-interruptor input { position: relative; flex: none; width: 40px; height: 22px; margin: 0; border-radius: 11px; background: var(--tg-linha); appearance: none; cursor: pointer; transition: background .15s; }
.tg-interruptor input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .15s; }
.tg-interruptor input:checked { background: var(--tg-ok); }
.tg-interruptor input:checked::after { transform: translateX(18px); }

/* ======================================================================
   Campo com mascara: <tg-mascara tipo="cnpj|cpf|cpf-cnpj|telefone|cep|moeda|quantidade"> (js em tg.js)
   ====================================================================== */

/* o <input> de dentro e um campo comum: herda borda, foco e erro do .tg-campo */
tg-mascara { position: relative; display: block; min-width: 0; }
tg-mascara > input { width: 100%; }
.tg-campo tg-mascara:is([tipo="moeda"], [tipo="quantidade"]) > input[type] { font-variant-numeric: tabular-nums; text-align: right; }
.tg-campo tg-mascara[tipo="moeda"] > input[type] { padding-left: 42px; }
/* ======================================================================
   Campo de data: <tg-data name="..." [intervalo] [min] [max]> (js em tg.js)
   ====================================================================== */

/* o <input> de dentro e um campo comum (borda, foco e erro do .tg-campo); o botao do calendario
   fica dentro dele, a direita, como o olho da senha */
tg-data { position: relative; display: block; min-width: 0; }
tg-data > input { width: 100%; font-variant-numeric: tabular-nums; }
.tg-campo tg-data > input[type] { padding-right: 46px; }
.tg-data-botao { position: absolute; top: 4px; right: 5px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--tg-suave); cursor: pointer; }
.tg-data-botao:hover, tg-data[aberto] .tg-data-botao { background: var(--tg-hover); color: var(--tg-realce); }
.tg-data-botao .tg-ico { width: 18px; height: 18px; }
.tg-data-botao:disabled { opacity: .45; cursor: default; }
.tg-filtros tg-data .tg-data-botao { top: 2px; }
/* o calendario fica na camada de cima (popover), na posicao que o tg.js calcula */
.tg-data-painel { position: fixed; inset: auto; z-index: 70; margin: 0; padding: 12px; overflow: visible; border: 1px solid var(--tg-linha); border-radius: 16px; background: var(--tg-superficie); color: var(--tg-texto); font: 13.5px var(--tg-fonte); box-shadow: var(--tg-sombra); }
.tg-data-conteudo { display: grid; gap: 12px; width: 280px; }
.tg-data-conteudo.com-atalhos { grid-template-columns: 136px 280px; width: auto; }
.tg-data-atalhos { display: grid; align-content: start; gap: 2px; padding-right: 12px; border-right: 1px solid var(--tg-linha); }
.tg-data-atalho { padding: 8px 10px; border: 0; border-radius: 9px; background: none; color: var(--tg-texto); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.tg-data-atalho:hover { background: var(--tg-hover); color: var(--tg-realce); }
.tg-data-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.tg-data-cab b { font-weight: 500; }
.tg-data-cab b::first-letter { text-transform: uppercase; }
.tg-data-navegar { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 9px; background: none; color: var(--tg-suave); cursor: pointer; }
.tg-data-navegar:hover:not(:disabled) { background: var(--tg-hover); color: var(--tg-realce); }
.tg-data-navegar:disabled { opacity: .35; cursor: default; }
.tg-data-navegar .tg-ico { width: 16px; height: 16px; }
.tg-data-semana, .tg-data-dias { display: grid; grid-template-columns: repeat(7, 1fr); }
.tg-data-semana span { padding: 4px 0; color: var(--tg-suave); font-size: 11.5px; font-weight: 500; text-align: center; }
.tg-data-dia { height: 36px; margin: 1px 0; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--tg-texto); font: inherit; font-variant-numeric: tabular-nums; cursor: pointer; }
.tg-data-dia:hover:not(:disabled) { background: var(--tg-hover); color: var(--tg-realce); }
.tg-data-dia:focus-visible { outline: 2px solid var(--tg-destaque); outline-offset: -2px; }
.tg-data-dia.fora { color: var(--tg-suave); opacity: .65; }
.tg-data-dia.hoje { box-shadow: inset 0 0 0 1px var(--tg-foco); color: var(--tg-realce); font-weight: 500; }
.tg-data-dia.no-periodo { border-radius: 0; background: var(--tg-primaria-claro); }
.tg-data-dia.escolhido, .tg-data-dia.escolhido:hover { background: var(--tg-primaria); color: #fff; font-weight: 500; opacity: 1; }
.tg-data-dia:disabled { color: var(--tg-suave); opacity: .35; cursor: default; text-decoration: line-through; }
.tg-data-rodape { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--tg-linha); }
.tg-data-dica { color: var(--tg-suave); font-size: 12px; }
@media (max-width: 480px) {
    .tg-data-conteudo.com-atalhos { grid-template-columns: 280px; }
    .tg-data-atalhos { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 10px; border-right: 0; border-bottom: 1px solid var(--tg-linha); }
    .tg-data-atalho { padding: 5px 10px; border: 1px solid var(--tg-linha); border-radius: 14px; font-size: 12px; }
}

.tg-mascara-prefixo { position: absolute; top: 0; bottom: 0; left: 13px; display: flex; align-items: center; color: var(--tg-suave); font-size: 13px; font-weight: 500; pointer-events: none; }

/* ======================================================================
   Combo com pesquisa: <tg-combo name="..." opcoes='[...]'> (js em tg.js)
   ====================================================================== */

tg-combo, tg-combo-multi { position: relative; display: block; min-width: 0; font: 14px var(--tg-fonte); color: var(--tg-texto); }
tg-combo *, tg-combo *::before, tg-combo *::after, tg-combo-multi *, tg-combo-multi *::before, tg-combo-multi *::after { box-sizing: border-box; }
.tg-combo-gatilho { display: flex; align-items: center; gap: 8px; width: 100%; height: 42px; margin: 0; padding: 0 10px 0 13px; border: 1px solid var(--tg-linha); border-radius: var(--tg-raio-p); outline: 0; background: var(--tg-superficie); color: var(--tg-texto); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; }
:is(tg-combo, tg-combo-multi)[tem-valor] .tg-combo-gatilho { padding-right: 40px; }
.tg-combo-gatilho:focus-visible, :is(tg-combo, tg-combo-multi)[aberto] .tg-combo-gatilho { border-color: var(--tg-foco); background: var(--tg-foco-fundo); box-shadow: 0 0 0 3px var(--tg-foco-halo); }
.tg-combo-texto { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tg-combo-texto.vazio { color: var(--tg-suave); }
.tg-combo-seta { width: 16px; height: 16px; color: var(--tg-suave); transition: transform .18s; }
:is(tg-combo, tg-combo-multi)[aberto] .tg-combo-seta { transform: rotate(180deg); }
:is(tg-combo, tg-combo-multi)[tem-valor] .tg-combo-seta { display: none; }
.tg-combo-limpar { position: absolute; top: 9px; right: 9px; display: none; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 7px; background: none; color: var(--tg-suave); cursor: pointer; }
.tg-combo-limpar .tg-ico { width: 15px; height: 15px; }
.tg-combo-limpar:hover { background: var(--tg-perigo-claro); color: var(--tg-perigo); }
:is(tg-combo, tg-combo-multi)[tem-valor]:not([disabled]) .tg-combo-limpar { display: grid; }
:is(tg-combo, tg-combo-multi)[disabled] .tg-combo-gatilho { background: var(--tg-fundo); color: var(--tg-suave); pointer-events: none; }

.tg-combo-painel { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60; padding: 8px; border: 1px solid var(--tg-linha); border-radius: 14px; background: var(--tg-superficie); box-shadow: var(--tg-sombra); animation: tg-entra .15s ease; }
:is(tg-combo, tg-combo-multi)[acima] .tg-combo-painel { top: auto; bottom: calc(100% + 6px); }
.tg-combo-busca { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px; border: 1px solid var(--tg-linha); border-radius: 10px; background: var(--tg-fundo); color: var(--tg-suave); }
.tg-combo-busca:focus-within { border-color: var(--tg-foco); background: var(--tg-foco-fundo); }
.tg-combo-busca .tg-ico { width: 16px; height: 16px; }
.tg-combo-busca input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--tg-texto); font: inherit; box-shadow: none; }
:is(tg-combo, tg-combo-multi)[sem-pesquisa] .tg-combo-busca { display: none; }
.tg-combo-lista { display: grid; gap: 2px; max-height: 248px; margin: 6px 0 0; padding: 0; overflow-y: auto; list-style: none; scrollbar-width: thin; }
:is(tg-combo, tg-combo-multi)[sem-pesquisa] .tg-combo-lista { margin-top: 0; }
.tg-combo-opcao { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; cursor: pointer; }
.tg-combo-opcao > span { flex: 1; min-width: 0; }
.tg-combo-opcao small { display: block; color: var(--tg-suave); font-size: 12px; }
.tg-combo-opcao.ativo { background: var(--tg-primaria-claro); }
.tg-combo-opcao[aria-selected="true"] { color: var(--tg-realce); font-weight: 500; }
.tg-combo-opcao[aria-selected="true"]::after { content: ""; flex: none; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12 5 5 9-10'/></svg>") center / contain no-repeat; mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12 5 5 9-10'/></svg>") center / contain no-repeat; }
.tg-combo-nada { padding: 14px 10px; color: var(--tg-suave); font-size: 13px; text-align: center; }

/* ======================================================================
   Combo de varias escolhas: <tg-combo-multi name="..." opcoes='[...]'> (js em tg.js)
   ====================================================================== */

/* caixa: as mesmas do combo, com uma etiqueta por escolha; o tg.js troca as que nao cabem por "+N" */
tg-combo-multi[tem-valor]:not([resumo]) .tg-combo-gatilho { padding-left: 6px; }
.tg-multi-etiquetas { display: flex; flex: 1; align-items: center; gap: 5px; min-width: 0; overflow: hidden; }
.tg-multi-etiqueta { display: inline-flex; flex: none; align-items: center; gap: 1px; max-width: 100%; height: 28px; padding: 0 3px 0 10px; border-radius: 8px; background: var(--tg-primaria-claro); color: var(--tg-realce); font-size: 13px; font-weight: 500; }
.tg-multi-etiqueta:first-child { flex-shrink: 1; min-width: 0; }
.tg-multi-etiquetas.medindo .tg-multi-etiqueta { flex-shrink: 0; }
.tg-multi-etiqueta > span:first-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tg-multi-tirar { display: grid; flex: none; place-items: center; width: 22px; height: 22px; border-radius: 6px; color: color-mix(in srgb, var(--tg-realce) 70%, var(--tg-superficie)); }
.tg-multi-tirar .tg-ico { width: 13px; height: 13px; }
.tg-multi-tirar:hover { background: var(--tg-perigo-claro); color: var(--tg-perigo); }
tg-combo-multi[disabled] .tg-multi-tirar { display: none; }
tg-combo-multi[disabled] .tg-multi-etiqueta { padding-right: 10px; background: var(--tg-linha); color: var(--tg-suave); }
.tg-multi-mais { display: inline-flex; flex: none; align-items: center; height: 28px; padding: 0 9px; border-radius: 8px; background: color-mix(in srgb, var(--tg-suave) 12%, var(--tg-superficie)); color: var(--tg-suave); font-size: 12.5px; font-weight: 500; }
.tg-multi-etiqueta[hidden], .tg-multi-mais[hidden] { display: none; }
.tg-filtros :is(.tg-multi-etiqueta, .tg-multi-mais) { height: 26px; }

/* a lista fica na camada de cima (popover), na posicao que o tg.js calcula: escapa da rolagem da gaveta */
.tg-multi-painel { position: fixed; inset: auto; z-index: 70; margin: 0; padding: 8px; overflow: visible; border: 1px solid var(--tg-linha); border-radius: 14px; background: var(--tg-superficie); color: var(--tg-texto); font: 14px var(--tg-fonte); box-shadow: var(--tg-sombra); }
.tg-multi-painel .tg-combo-lista { margin-top: 4px; outline: 0; }
.tg-multi-barra { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; }
tg-combo-multi[sem-pesquisa] .tg-multi-barra { margin-top: 0; }
.tg-multi-acao { padding: 5px 8px; border: 0; border-radius: 8px; background: none; color: var(--tg-realce); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; }
.tg-multi-acao:hover:not(:disabled) { background: var(--tg-hover); }
.tg-multi-acao:disabled { color: var(--tg-suave); opacity: .6; cursor: default; }
.tg-multi-acao[hidden] { display: none; }
.tg-multi-acao[data-nenhum] { margin-left: auto; }
/* a escolhida tem a caixa de marcar cheia, sem o check do combo simples */
.tg-multi-opcao[aria-selected="true"] { font-weight: 400; }
.tg-multi-opcao[aria-selected="true"]::after { content: none; }
.tg-multi-opcao > .tg-multi-marca { display: grid; flex: none; place-items: center; width: 18px; height: 18px; border: 1.5px solid color-mix(in srgb, var(--tg-suave) 60%, var(--tg-superficie)); border-radius: 5px; background: var(--tg-superficie); transition: background .12s, border-color .12s; }
.tg-multi-opcao[aria-selected="true"] .tg-multi-marca { border-color: var(--tg-primaria); background: var(--tg-primaria); }
.tg-multi-opcao[aria-selected="true"] .tg-multi-marca::after { content: ""; width: 12px; height: 12px; background: #fff; -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12 5 5 9-10'/></svg>") center / contain no-repeat; mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12 5 5 9-10'/></svg>") center / contain no-repeat; }
.tg-multi-opcao[aria-disabled="true"] { opacity: .45; cursor: default; }
.tg-multi-rodape { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; padding: 8px 2px 0 6px; border-top: 1px solid var(--tg-linha); }
.tg-multi-contagem { color: var(--tg-suave); font-size: 12.5px; }

/* ======================================================================
   Abas: <tg-abas abas='[...]' valor="..." [endereco]> (js em tg.js)
   ====================================================================== */

tg-abas { display: block; min-width: 0; }
.tg-abas-lista { position: relative; display: flex; gap: 4px; padding: 6px; overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid var(--tg-linha); border-radius: var(--tg-raio); background: var(--tg-superficie); box-shadow: var(--tg-sombra-p); scrollbar-width: none; }
.tg-abas-lista::-webkit-scrollbar { display: none; }
.tg-aba { display: inline-flex; flex: none; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border: 0; border-radius: 11px; background: none; color: var(--tg-suave); font: 500 13px var(--tg-fonte); white-space: nowrap; cursor: pointer; transition: background .15s, color .15s; }
a.tg-aba { text-decoration: none; }
.tg-aba:hover { background: var(--tg-hover); color: var(--tg-realce); }
.tg-aba:focus-visible { outline: 2px solid var(--tg-destaque); outline-offset: -2px; }
.tg-aba:is([aria-selected="true"], [aria-current="page"]) { background: var(--tg-primaria); color: #fff; }
.tg-aba .tg-ico { width: 16px; height: 16px; }
.tg-aba:is([aria-selected="true"], [aria-current="page"]) .tg-conta { background: rgba(0, 0, 0, .22); color: #fff; }
.tg-aba:is([aria-selected="true"], [aria-current="page"]) .tg-conta.alerta { background: var(--tg-perigo); }
.tg-aba:disabled { opacity: .45; pointer-events: none; }
/* modo linha: abas sublinhadas, para dentro de um cartao */
tg-abas[linha] .tg-abas-lista { gap: 2px; padding: 0 12px; border: 0; border-bottom: 1px solid var(--tg-linha); border-radius: 0; background: none; box-shadow: none; }
tg-abas[linha] .tg-aba { height: 44px; margin-bottom: -1px; padding: 0 12px; border-bottom: 2px solid transparent; border-radius: 0; }
tg-abas[linha] .tg-aba[aria-selected="true"] { border-bottom-color: var(--tg-primaria); background: none; color: var(--tg-realce); }
tg-abas[linha] .tg-aba[aria-selected="true"] .tg-conta { background: var(--tg-primaria-claro); color: var(--tg-realce); }
tg-abas[linha] .tg-aba[aria-selected="true"] .tg-conta.alerta { background: var(--tg-perigo-claro); color: var(--tg-perigo-texto); }
[data-tg-aba-painel][hidden] { display: none; }

/* ======================================================================
   Envio de arquivos (P05): <tg-arquivos name="..." [multiplo] [envio="/api/..."]> (js em tg.js)
   ====================================================================== */

tg-arquivos { display: grid; gap: 8px; min-width: 0; }
.tg-arquivos-area { display: grid; justify-items: center; gap: 4px; width: 100%; padding: 18px 16px; border: 2px dashed var(--tg-linha); border-radius: var(--tg-raio-p); background: var(--tg-fundo); color: var(--tg-suave); font: inherit; text-align: center; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; }
.tg-arquivos-area:hover, tg-arquivos[arrastando] .tg-arquivos-area { border-color: var(--tg-foco); background: var(--tg-foco-fundo); }
/* foco igual ao dos campos: borda, halo e fundo claro */
.tg-arquivos-area:focus-visible { outline: 0; border-color: var(--tg-foco); background: var(--tg-foco-fundo); box-shadow: 0 0 0 3px var(--tg-foco-halo); }
.tg-arquivos-area b { color: var(--tg-texto); font-size: 13.5px; }
.tg-arquivos-area small { font-size: 12px; }
.tg-arquivos-ico { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 4px; border-radius: 12px; background: var(--tg-primaria-claro); color: var(--tg-realce); }
tg-arquivos[disabled] .tg-arquivos-area { opacity: .55; pointer-events: none; }
tg-arquivos[cheio] .tg-arquivos-area { display: none; }
/* Tirar foto: so com o atributo camera e so em tela de toque; some junto com a area quando cheio */
.tg-arquivos-captura { display: none; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.tg-arquivos-camera, .tg-arquivos-video { display: none; width: 100%; justify-content: center; }
tg-arquivos[camera] .tg-arquivos-camera, tg-arquivos[video] .tg-arquivos-video { display: inline-flex; }
@media (pointer: coarse) { tg-arquivos:is([camera], [video]):not([cheio]) .tg-arquivos-captura { display: grid; } }
.tg-campo.invalido .tg-arquivos-area { border-color: var(--tg-perigo); background: var(--tg-superficie); }
.tg-arquivos-lista { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tg-arquivos-lista:empty { display: none; }
.tg-arquivo { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding: 8px 6px 8px 10px; border: 1px solid var(--tg-linha); border-radius: 12px; background: var(--tg-superficie); }
.tg-arquivo > .tg-ico { width: 20px; height: 20px; color: var(--tg-realce); }
.tg-arquivo-nome { min-width: 0; }
.tg-arquivo-nome b { display: block; overflow: hidden; font-size: 13px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.tg-arquivo-nome small { display: block; color: var(--tg-suave); font-size: 12px; }
.tg-arquivo-acoes { display: flex; align-items: center; gap: 2px; }
.tg-arquivo .tg-progresso { grid-column: 2 / -1; }
.tg-arquivo.erro { border-color: color-mix(in srgb, var(--tg-perigo) 35%, var(--tg-superficie)); background: var(--tg-perigo-claro); }
.tg-arquivo.erro > .tg-ico, .tg-arquivo.erro small { color: var(--tg-perigo); }
.tg-arquivo.pronto > .tg-ico { color: var(--tg-ok); }

/* ======================================================================
   Arvore (P06): <tg-arvore nos='[...]' acoes='[...]'> (js em tg.js)
   ====================================================================== */

tg-arvore { display: block; min-width: 0; }
.tg-arvore-lista { margin: 0; padding: 0; list-style: none; }
.tg-arvore-no { --tg-nivel: 0; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 10px 6px calc(10px + var(--tg-nivel) * 26px); border-bottom: 1px solid var(--tg-linha); outline: 0; background-image: repeating-linear-gradient(to right, transparent 0 21px, var(--tg-linha) 21px 22px, transparent 22px 26px); background-size: calc(var(--tg-nivel) * 26px + 10px) 100%; background-repeat: no-repeat; cursor: default; }
.tg-arvore-no:last-child { border-bottom: 0; }
.tg-arvore-no:hover { background-color: var(--tg-hover); }
.tg-arvore-no:focus-visible { background-color: var(--tg-primaria-claro); box-shadow: inset 3px 0 0 var(--tg-destaque); }
.tg-arvore-no[aria-selected="true"] { background-color: var(--tg-primaria-claro); }
.tg-arvore-abrir { display: grid; place-items: center; flex: none; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--tg-suave); cursor: pointer; }
.tg-arvore-abrir:hover { background: var(--tg-superficie); color: var(--tg-realce); }
.tg-arvore-abrir .tg-ico { width: 16px; height: 16px; transition: transform .15s; }
.tg-arvore-no[aria-expanded="true"] .tg-arvore-abrir .tg-ico { transform: rotate(90deg); }
.tg-arvore-folha { flex: none; width: 26px; }
.tg-arvore-cod { flex: none; min-width: 48px; color: var(--tg-suave); font: 500 12.5px Consolas, "Cascadia Code", monospace; }
.tg-arvore-texto { flex: 1; min-width: 0; }
.tg-arvore-texto b { display: block; overflow: hidden; font-size: 13.5px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.tg-arvore-texto small { display: block; overflow: hidden; color: var(--tg-suave); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.tg-arvore-lado { display: flex; flex: none; align-items: center; gap: 6px; }
.tg-arvore-no.inativo :is(.tg-arvore-cod, .tg-arvore-texto) { opacity: .5; }
.tg-arvore-no.inativo .tg-arvore-texto b { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--tg-suave) 60%, transparent); }
.tg-arvore-nada { padding: 28px 12px; color: var(--tg-suave); text-align: center; }
@media (max-width: 640px) {
    .tg-arvore-no { flex-wrap: wrap; padding-left: calc(6px + var(--tg-nivel) * 16px); background-size: calc(var(--tg-nivel) * 16px + 6px) 100%; background-image: repeating-linear-gradient(to right, transparent 0 11px, var(--tg-linha) 11px 12px, transparent 12px 16px); }
    .tg-arvore-cod { min-width: 0; }
    /* as acoes so descem para a linha de baixo quando o texto nao cabe ao lado */
    .tg-arvore-texto { flex: 1 1 110px; }
    .tg-arvore-texto b { white-space: normal; }
    .tg-arvore-lado { margin-left: auto; }
}

/* ======================================================================
   Assistente em etapas (P08): <tg-etapas etapas='[...]' valor="..." [paineis="#id"]> (js em tg.js)
   ====================================================================== */

tg-etapas { display: block; min-width: 0; }
.tg-etapas-lista { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tg-etapas-lista > li { display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; }
.tg-etapas-lista > li:last-child { flex: none; }
/* o traco ate a proxima etapa fica verde depois da etapa concluida */
.tg-etapas-lista > li:not(:last-child)::after { content: ""; flex: 1; min-width: 12px; height: 2px; border-radius: 2px; background: var(--tg-linha); }
.tg-etapas-lista > li.feita:not(:last-child)::after { background: var(--tg-ok); }
.tg-etapa { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 5px 10px 5px 5px; border: 0; border-radius: 22px; background: none; color: var(--tg-suave); font: 500 13px var(--tg-fonte); text-align: left; cursor: pointer; transition: background .15s, color .15s; }
.tg-etapa:hover:not(:disabled) { background: var(--tg-hover); color: var(--tg-realce); }
.tg-etapa:focus-visible { outline: 2px solid var(--tg-destaque); outline-offset: 1px; }
.tg-etapa:disabled { cursor: default; }
.tg-etapa-num { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border: 2px solid var(--tg-linha); border-radius: 50%; background: var(--tg-superficie); font-size: 13px; transition: background .15s, border-color .15s; }
.tg-etapa-num .tg-ico { width: 16px; height: 16px; }
.tg-etapa-texto { min-width: 0; }
.tg-etapa-texto b { display: block; overflow: hidden; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.tg-etapa-texto small { display: block; overflow: hidden; color: var(--tg-suave); font-size: 11.5px; font-weight: 400; white-space: nowrap; text-overflow: ellipsis; }
.tg-etapas-lista > li.feita .tg-etapa { color: var(--tg-texto); }
.tg-etapas-lista > li.feita .tg-etapa-num { border-color: var(--tg-ok); background: var(--tg-ok); color: #fff; }
.tg-etapas-lista > li.atual .tg-etapa { color: var(--tg-realce); }
.tg-etapas-lista > li.atual .tg-etapa-num { border-color: var(--tg-primaria); background: var(--tg-primaria); color: #fff; box-shadow: 0 0 0 4px var(--tg-foco-halo); }
.tg-etapas-lista > li.erro .tg-etapa { color: var(--tg-perigo); }
.tg-etapas-lista > li.erro .tg-etapa-num { border-color: var(--tg-perigo); background: var(--tg-perigo-claro); color: var(--tg-perigo); }
.tg-etapas-lista > li.atual.erro .tg-etapa-num { background: var(--tg-perigo); color: #fff; box-shadow: 0 0 0 4px var(--tg-perigo-claro); }
.tg-etapas-atual { display: none; margin: 10px 0 0; font-weight: 500; }
.tg-etapas-atual small { color: var(--tg-suave); font-size: 12px; font-weight: 400; }
/* o hidden que o tg.js poe nos paineis e nos botoes vence o display do .tg-btn e da grade */
[data-tg-etapa-painel][hidden], [data-tg-etapa][hidden] { display: none; }
/* resumo no fim: um bloco por etapa, com "Alterar" */
.tg-etapas-resumo { display: grid; gap: 12px; }
.tg-etapas-bloco { min-width: 0; border: 1px solid var(--tg-linha); border-radius: 12px; }
.tg-etapas-bloco-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px 6px 14px; border-bottom: 1px solid var(--tg-linha); border-radius: 12px 12px 0 0; background: var(--tg-fundo); }
.tg-etapas-bloco.erro { border-color: color-mix(in srgb, var(--tg-perigo) 40%, var(--tg-superficie)); }
.tg-etapas-bloco.erro .tg-etapas-bloco-cab { background: var(--tg-perigo-claro); color: var(--tg-perigo-texto); }
.tg-etapas-dados { display: grid; grid-template-columns: minmax(120px, 220px) minmax(0, 1fr); gap: 8px 16px; margin: 0; padding: 12px 14px; }
.tg-etapas-dados dt { color: var(--tg-suave); font-size: 12.5px; }
.tg-etapas-dados dd { margin: 0; font-weight: 400; overflow-wrap: anywhere; }
.tg-etapas-dados dd.vazio { color: var(--tg-suave); font-weight: 400; font-style: italic; }
@media (max-width: 640px) {
    .tg-etapa { padding: 3px; }
    .tg-etapa-texto { display: none; }
    .tg-etapas-atual { display: block; }
    .tg-etapas-dados { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .tg-etapas-dados dd + dt { margin-top: 8px; }
}

/* ======================================================================
   Linha do tempo (P09): <tg-linha-tempo inicio="..." fim="..." marcos='[...]'> (js em tg.js)
   ====================================================================== */

/* a caixa e um container: abaixo de 520 px a linha vira lista vertical (cabe no celular e
   numa coluna estreita do computador) */
tg-linha-tempo { display: block; min-width: 0; container-type: inline-size; }
/* --tg-tempo-cima/baixo: quantas faixas de rotulo o tg.js usou em cada lado da linha */
.tg-tempo { --tg-tempo-cima: 1; --tg-tempo-baixo: 1; --tg-tempo-faixa: 40px; padding: calc(var(--tg-tempo-cima) * var(--tg-tempo-faixa) + 12px) 20px calc(var(--tg-tempo-baixo) * var(--tg-tempo-faixa) + 12px); }
.tg-tempo-trilho { position: relative; height: 6px; margin: 0; padding: 0; border-radius: 3px; background: var(--tg-linha); }
.tg-tempo-vigencia, .tg-tempo-decorrido { position: absolute; top: 0; bottom: 0; left: var(--tg-de); width: calc(var(--tg-ate) - var(--tg-de)); border-radius: inherit; }
.tg-tempo-vigencia { background: color-mix(in srgb, var(--tg-destaque) 32%, var(--tg-superficie)); }
.tg-tempo-decorrido { background: var(--tg-primaria); }
.tg-tempo-marco { --tg-nivel: 0; --tg-t-cor: var(--tg-primaria); position: absolute; top: 3px; left: var(--tg-x); width: 0; height: 0; }
.tg-tempo-marco.ok { --tg-t-cor: var(--tg-ok); --tg-t-texto: var(--tg-ok-texto); }
.tg-tempo-marco.aviso { --tg-t-cor: var(--tg-aviso); --tg-t-texto: var(--tg-aviso-texto); }
.tg-tempo-marco.perigo { --tg-t-cor: var(--tg-perigo); --tg-t-texto: var(--tg-perigo-texto); }
.tg-tempo-marco.info { --tg-t-cor: var(--tg-info); --tg-t-texto: var(--tg-info-texto); }
.tg-tempo-marco:is(.inicio, .fim) { --tg-t-cor: var(--tg-texto); }
.tg-tempo-marco.hoje { --tg-t-cor: var(--tg-perigo); }
.tg-tempo-ponto { position: absolute; top: -8px; left: -8px; z-index: 1; width: 16px; height: 16px; border: 3px solid var(--tg-superficie); border-radius: 50%; background: var(--tg-t-cor); box-shadow: 0 0 0 1px color-mix(in srgb, var(--tg-t-cor) 40%, transparent); }
.tg-tempo-marco:is(.inicio, .fim) .tg-tempo-ponto { border-radius: 5px; }
/* simulado (aditivo em elaboracao): so o contorno, tracejado */
.tg-tempo-marco.simulado .tg-tempo-ponto { border: 2px dashed var(--tg-t-cor); background: var(--tg-superficie); box-shadow: none; }
.tg-tempo-marco.hoje .tg-tempo-ponto { top: -13px; left: -1px; width: 0; height: 32px; border: 0; border-left: 2px dashed var(--tg-perigo); border-radius: 0; background: none; box-shadow: none; }
/* haste do ponto ate o rotulo que subiu (ou desceu) de faixa */
.tg-tempo-marco::before { content: ""; position: absolute; left: -1px; width: 2px; height: calc(var(--tg-nivel) * var(--tg-tempo-faixa)); background: color-mix(in srgb, var(--tg-t-cor) 30%, transparent); }
.tg-tempo-marco[data-lado="cima"]::before { bottom: 12px; }
.tg-tempo-marco[data-lado="baixo"]::before { top: 12px; }
.tg-tempo-rotulo { position: absolute; bottom: calc(12px + var(--tg-nivel) * var(--tg-tempo-faixa)); left: 0; z-index: 2; display: grid; justify-items: center; width: max-content; max-width: 160px; padding: 2px 7px; border: 0; border-radius: 8px; background: var(--tg-superficie); color: var(--tg-texto); font: inherit; text-align: center; white-space: nowrap; text-decoration: none; transform: translateX(-50%); }
.tg-tempo-marco[data-lado="baixo"] .tg-tempo-rotulo { top: calc(12px + var(--tg-nivel) * var(--tg-tempo-faixa)); bottom: auto; }
.tg-tempo-marco[data-alinhar="inicio"] .tg-tempo-rotulo { justify-items: start; text-align: left; transform: translateX(-14px); }
.tg-tempo-marco[data-alinhar="fim"] .tg-tempo-rotulo { justify-items: end; text-align: right; transform: translateX(calc(-100% + 14px)); }
.tg-tempo-rotulo b { max-width: 100%; overflow: hidden; font-size: 12.5px; font-weight: 500; line-height: 1.35; text-overflow: ellipsis; }
.tg-tempo-rotulo small { color: var(--tg-suave); font-size: 11.5px; line-height: 1.35; font-variant-numeric: tabular-nums; }
.tg-tempo-rotulo span { display: none; }
.tg-tempo-marco:is(.ok, .aviso, .perigo, .info, .hoje) .tg-tempo-rotulo b { color: var(--tg-t-texto, var(--tg-t-cor)); }
:is(button, a).tg-tempo-rotulo { cursor: pointer; transition: background .15s, box-shadow .15s; }
:is(button, a).tg-tempo-rotulo:hover { background: var(--tg-hover); box-shadow: inset 0 0 0 1px var(--tg-linha); }
.tg-tempo-rotulo:focus-visible { outline: 2px solid var(--tg-destaque); outline-offset: 1px; }
.tg-tempo-rotulo[aria-pressed="true"] { background: var(--tg-primaria-claro); box-shadow: inset 0 0 0 1px var(--tg-foco); }
.tg-tempo-nada { margin: 0; padding: 20px; color: var(--tg-suave); text-align: center; }
@container (max-width: 520px) {
    .tg-tempo { padding: 4px 0; }
    .tg-tempo-trilho { height: auto; background: none; }
    .tg-tempo-trilho::before { content: ""; position: absolute; top: 18px; bottom: 18px; left: 7px; width: 2px; border-radius: 1px; background: var(--tg-linha); }
    .tg-tempo-vigencia, .tg-tempo-decorrido, .tg-tempo-marco::before { display: none; }
    .tg-tempo-marco { position: relative; top: auto; left: auto; display: flex; align-items: center; gap: 10px; width: auto; height: auto; padding: 3px 0; }
    .tg-tempo-ponto { position: relative; top: auto; left: auto; flex: none; }
    .tg-tempo-marco.hoje .tg-tempo-ponto { top: auto; left: auto; width: 16px; height: 0; border-top: 2px dashed var(--tg-perigo); border-left: 0; }
    .tg-tempo-rotulo, .tg-tempo-marco[data-lado] .tg-tempo-rotulo, .tg-tempo-marco[data-alinhar] .tg-tempo-rotulo { position: static; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; justify-items: start; flex: 1; gap: 0 10px; width: auto; min-width: 0; max-width: none; padding: 6px 10px; text-align: left; white-space: normal; transform: none; }
    .tg-tempo-rotulo small { grid-row: 1; grid-column: 2; }
    .tg-tempo-rotulo span { display: block; grid-column: 1 / -1; color: var(--tg-suave); font-size: 12px; }
}

/* ======================================================================
   Contador e etiqueta
   ====================================================================== */

/* contador: quantidade. ok = so informacao; alerta = pendencia; zero fica no padrao */
.tg-conta { display: inline-block; min-width: 22px; padding: 1px 7px; border-radius: 12px; background: color-mix(in srgb, var(--tg-primaria) 8%, var(--tg-superficie)); color: var(--tg-realce); font-size: 11px; font-weight: 500; line-height: 1.5; text-align: center; }
.tg-conta.ok { background: var(--tg-ok-claro); color: var(--tg-ok-texto); }
.tg-conta.aviso { background: var(--tg-aviso-claro); color: var(--tg-aviso-texto); }
.tg-conta.alerta { background: var(--tg-perigo-claro); color: var(--tg-perigo-texto); }
/* etiqueta: situacao de um registro */
.tg-etiqueta { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 20px; background: color-mix(in srgb, var(--tg-suave) 12%, var(--tg-superficie)); color: var(--tg-suave); font-size: 12px; font-weight: 500; white-space: nowrap; }
.tg-etiqueta::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tg-etiqueta.ok { background: var(--tg-ok-claro); color: var(--tg-ok-texto); }
.tg-etiqueta.aviso { background: var(--tg-aviso-claro); color: var(--tg-aviso-texto); }
.tg-etiqueta.perigo { background: var(--tg-perigo-claro); color: var(--tg-perigo-texto); }
.tg-etiqueta.info { background: var(--tg-info-claro); color: var(--tg-info-texto); }
/* texto de situacao (A08), solto no texto ou no valor: <span class="tg-texto perigo">R$ -1.200,00</span>.
   Pendencia (aviso, perigo) ganha peso; ok e info, so a cor. O aviso puro tem 3,3:1 no branco:
   misturado com a cor do texto passa de 4,5:1 e, no escuro, clareia junto */
.tg-texto.ok { color: var(--tg-ok); }
.tg-texto.info { color: var(--tg-info); }
.tg-texto.aviso { color: color-mix(in srgb, var(--tg-aviso) 80%, var(--tg-texto)); }
.tg-texto.perigo { color: var(--tg-perigo); }
/* :not(b, strong): o negrito do valor (600) continua; so o texto comum sobe para 500 */
.tg-texto:is(.aviso, .perigo):not(b, strong) { font-weight: 500; }

/* ======================================================================
   Tabela: contador centralizado, valor a direita, texto a esquerda, coluna Acoes centralizada
   ====================================================================== */

.tg-tabela-rolagem { overflow-x: auto; }
.tg-tabela { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.tg-tabela th { padding: 11px 16px; background: var(--tg-fundo); border-bottom: 1px solid var(--tg-linha); color: var(--tg-suave); font-size: 11.5px; font-weight: 500; letter-spacing: .02em; text-align: left; white-space: nowrap; }
.tg-tabela td { padding: 12px 16px; border-bottom: 1px solid var(--tg-linha); vertical-align: middle; }
.tg-tabela tbody tr:last-child td { border-bottom: 0; }
.tg-tabela tbody tr:hover td { background: var(--tg-hover); }
.tg-tabela :is(th, td).num, .tg-tabela :is(th, td).acoes { text-align: center; }
/* valor (R$, quantidade, percentual): a direita e com algarismos de mesma largura, para comparar de olho.
   num continua centralizado: e para contador curto (codigo, quantidade de reservas) */
.tg-tabela :is(th, td).valor { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tg-tabela td.acoes { white-space: nowrap; }
.tg-tabela td small { display: block; color: var(--tg-suave); font-size: 12px; }
/* link em celula: so o fundo muda no hover. Vale tambem em <button> (abrir na gaveta, sem navegar) */
.tg-link { margin: -2px -5px; padding: 2px 5px; border: 0; border-radius: 6px; background: none; color: var(--tg-realce); font: inherit; font-weight: 500; text-align: inherit; text-decoration: none; cursor: pointer; }
.tg-link:hover { background: var(--tg-primaria-claro); color: var(--tg-realce); }
/* cadastro inativo (A08): <tr class="inativo">. Sem opacity na celula: a coluna presa da tabela
   fixa ficaria transparente e mostraria o que rola por baixo. O texto vai para a cor suave e so o
   que tem cor propria esmaece; Acoes e a caixa de selecao ficam normais, para reativar */
.tg-tabela tr.inativo > td:not(.acoes, .sel) { color: var(--tg-suave); }
/* o texto da linha inativa fica na cor suave (contraste de 4,5); so o que nao e texto esmaece */
.tg-tabela tr.inativo > td:not(.acoes, .sel) :is(.tg-progresso-barra, img) { opacity: .6; }
.tg-tabela tr.inativo > td:not(.acoes, .sel) .tg-avatar:not(img) { background: color-mix(in srgb, var(--tg-suave) 10%, var(--tg-superficie)); color: var(--tg-suave); }
.tg-tabela tr.inativo > td:not(.acoes, .sel) :is(.tg-link, a, .tg-texto) { color: var(--tg-suave); }
.tg-tabela tr.inativo > td:not(.acoes, .sel) :is(.tg-etiqueta, .tg-conta) { background: color-mix(in srgb, var(--tg-suave) 10%, var(--tg-superficie)); color: var(--tg-suave); }

/* ----- Tabela numerica (P03): ordenacao, totais, colunas fixas, cabecalho preso -----
   Feita so de classes e aria-sort: o React (TanStack Table) desenha as linhas e guarda a
   ordem; em HTML puro, data-tg-ordenar na <table> ordena pelo tg.js. */

/* cabecalho que ordena: <th aria-sort="ascending|descending|none"><button class="tg-ordenar">Saldo</button></th> */
.tg-ordenar { display: inline-flex; align-items: center; gap: 5px; margin: -4px -6px; padding: 4px 6px; border: 0; border-radius: 7px; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: inherit; white-space: nowrap; cursor: pointer; }
.tg-ordenar:hover { background: var(--tg-hover); color: var(--tg-realce); }
.tg-ordenar::after { content: ""; flex: none; width: 12px; height: 12px; background: currentColor; opacity: .35; -webkit-mask: var(--tg-i-ordem) center / contain no-repeat; mask: var(--tg-i-ordem) center / contain no-repeat;
    --tg-i-ordem: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m7 9 5-5 5 5M7 15l5 5 5-5'/></svg>"); }
th[aria-sort="ascending"] .tg-ordenar, th[aria-sort="descending"] .tg-ordenar { color: var(--tg-realce); }
th[aria-sort="ascending"] .tg-ordenar::after { opacity: 1; --tg-i-ordem: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m7 14 5-5 5 5'/></svg>"); }
th[aria-sort="descending"] .tg-ordenar::after { opacity: 1; --tg-i-ordem: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m7 10 5 5 5-5'/></svg>"); }
/* em coluna de valor o icone vem antes, para o numero continuar encostado a direita */
.tg-tabela th.valor .tg-ordenar { flex-direction: row-reverse; }

/* linha de totais */
.tg-tabela tfoot td, .tg-tabela tfoot th { padding: 12px 16px; border-top: 2px solid var(--tg-linha); background: var(--tg-fundo); color: var(--tg-texto); font-size: 13.5px; font-weight: 600; text-align: left; }
.tg-tabela tfoot :is(td, th).valor { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tg-tabela tfoot :is(td, th).num { text-align: center; }

/* colunas fixas na rolagem lateral: tg-tabela-fixa (a 1a) ou tg-tabela-fixa fixa-2 (as duas primeiras;
   a 1a com largura --tg-fixa-1, padrao 64px) */
.tg-tabela-fixa :is(th, td):first-child { position: sticky; left: 0; z-index: 1; background: var(--tg-superficie); }
.tg-tabela-fixa.fixa-2 :is(th, td):first-child { width: var(--tg-fixa-1, 64px); min-width: var(--tg-fixa-1, 64px); max-width: var(--tg-fixa-1, 64px); }
.tg-tabela-fixa.fixa-2 :is(th, td):nth-child(2) { position: sticky; left: var(--tg-fixa-1, 64px); z-index: 1; background: var(--tg-superficie); }
.tg-tabela-fixa:not(.fixa-2) :is(th, td):first-child, .tg-tabela-fixa.fixa-2 :is(th, td):nth-child(2) { box-shadow: 1px 0 0 var(--tg-linha), 6px 0 8px -6px rgba(0, 44, 68, .18); }
/* :is(..., .fixa-2) da a especificidade de duas classes: sem ela, o fundo branco da 2a coluna
   presa (.tg-tabela-fixa.fixa-2) vencia o fundo do cabecalho e dos totais */
:is(.tg-tabela-fixa, .tg-tabela-fixa.fixa-2) thead th:is(:first-child, :nth-child(2)) { background: var(--tg-fundo); }
:is(.tg-tabela-fixa, .tg-tabela-fixa.fixa-2) tfoot :is(td, th):is(:first-child, :nth-child(2)) { background: var(--tg-fundo); }
.tg-tabela-fixa tbody tr:hover td:is(:first-child, :nth-child(2)) { background: var(--tg-hover); }
.tg-tabela-fixa.fixa-2 tbody tr:hover td:first-child { background: var(--tg-hover); }
/* no celular a 2a coluna presa nao passa de 42% da tela: sobra lugar para os numeros rolarem */
@media (max-width: 640px) { .tg-tabela-fixa.fixa-2 :is(th, td):nth-child(2) { max-width: 42vw; } }

/* cabecalho preso quando a tabela rola por dentro: <div class="tg-tabela-rolagem alta"> */
.tg-tabela-rolagem.alta { max-height: var(--tg-tabela-altura, 70vh); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.tg-tabela-rolagem.alta thead th { position: sticky; top: 0; z-index: 2; }
.tg-tabela-rolagem.alta .tg-tabela-fixa thead th:first-child, .tg-tabela-rolagem.alta .tg-tabela-fixa.fixa-2 thead th:nth-child(2) { z-index: 3; }
.tg-tabela-rolagem.alta tfoot :is(td, th) { position: sticky; bottom: 0; z-index: 2; }
.tg-tabela-rolagem.alta .tg-tabela-fixa tfoot :is(td, th):is(:first-child, :nth-child(2)) { z-index: 3; }

/* ======================================================================
   Dica: data-tg-dica="Texto" (js em tg.js)
   ====================================================================== */

/* na camada de cima, posicao fixa calculada pelo tg.js; --tg-dica-seta e onde a seta aponta */
.tg-dica { position: fixed; inset: auto; z-index: 90; max-width: min(280px, calc(100vw - 16px)); margin: 0; padding: 6px 10px; overflow: visible; border: 0; border-radius: 8px; background: var(--tg-texto); color: var(--tg-superficie); font: 500 12px/1.4 var(--tg-fonte); box-shadow: 0 6px 18px rgba(0, 20, 35, .22); pointer-events: none; animation: tg-entra .12s ease; }
.tg-dica::after { content: ""; position: absolute; top: 100%; left: var(--tg-dica-seta, 50%); margin-left: -5px; border: 5px solid transparent; border-top-color: var(--tg-texto); }
.tg-dica.abaixo::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--tg-texto); }

/* ======================================================================
   Menu de acoes: <tg-acoes acoes='[...]' rotulo="..."> (js em tg.js)
   ====================================================================== */

tg-acoes { display: inline-block; vertical-align: middle; }
.tg-acoes-botao[aria-expanded="true"] { background: var(--tg-hover); }
/* na faixa azul do topo, o botao dos tres pontos segue o .tg-btn-claro: com a cor do texto ele sumia
   no fundo da marca (0.21.3) */
.tg-faixa .tg-acoes-botao { width: 40px; height: 40px; border-color: rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .14); color: #fff; }
.tg-faixa .tg-acoes-botao:is(:hover, [aria-expanded="true"]) { background: rgba(255, 255, 255, .24); color: #fff; }
.tg-acoes-menu { position: fixed; inset: auto; z-index: 80; min-width: 190px; max-width: min(300px, calc(100vw - 16px)); margin: 0; padding: 6px; overflow: visible; border: 1px solid var(--tg-linha); border-radius: 14px; background: var(--tg-superficie); color: var(--tg-texto); font: 13.5px var(--tg-fonte); box-shadow: var(--tg-sombra); animation: tg-entra .12s ease; }
.tg-acoes-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 8px 10px; border: 0; border-radius: 9px; background: none; color: var(--tg-texto); font: inherit; text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer; }
.tg-acoes-item .tg-ico, .tg-acoes-sem-icone { flex: none; width: 17px; height: 17px; color: var(--tg-suave); }
.tg-acoes-item:is(:hover, :focus) { outline: 0; background: var(--tg-hover); color: var(--tg-realce); }
.tg-acoes-item:is(:hover, :focus) .tg-ico { color: currentColor; }
.tg-acoes-item:focus-visible { box-shadow: inset 0 0 0 2px var(--tg-foco); }
/* excluir: vermelho; no foco, fundo vermelho claro (o tg.confirmar pergunta antes) */
.tg-acoes-item.perigo, .tg-acoes-item.perigo .tg-ico { color: var(--tg-perigo); }
.tg-acoes-item.perigo:is(:hover, :focus) { background: var(--tg-perigo-claro); color: var(--tg-perigo-texto); }
.tg-acoes-item.separar { position: relative; margin-top: 9px; }
.tg-acoes-item.separar::before { content: ""; position: absolute; top: -5px; left: 6px; right: 6px; height: 1px; background: var(--tg-linha); }
.tg-acoes-item[aria-disabled="true"] { opacity: .45; cursor: default; }
@media (pointer: coarse) { .tg-acoes-item { min-height: 44px; } }

/* ======================================================================
   Painel de avisos: <tg-avisos avisos='[...]'> no topo (js em tg.js)
   ====================================================================== */

tg-avisos { display: inline-flex; }
.tg-avisos-botao[aria-expanded="true"] { border-color: var(--tg-foco); background: var(--tg-hover); color: var(--tg-realce); }
.tg-avisos-painel { position: fixed; inset: auto; z-index: 80; width: min(380px, calc(100vw - 16px)); margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--tg-linha); border-radius: 16px; background: var(--tg-superficie); color: var(--tg-texto); font: 13.5px/1.45 var(--tg-fonte); box-shadow: var(--tg-sombra); animation: tg-entra .15s ease; }
.tg-avisos-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 50px; padding: 8px 10px 8px 16px; border-bottom: 1px solid var(--tg-linha); }
.tg-avisos-cab b { font-size: 14.5px; font-weight: 500; }
.tg-avisos-lista { max-height: min(420px, 62vh); margin: 0; padding: 6px; overflow-y: auto; list-style: none; overscroll-behavior: contain; scrollbar-width: thin; }
.tg-aviso { --tg-a-cor: var(--tg-realce); --tg-a-claro: var(--tg-primaria-claro); position: relative; display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 10px; border: 0; border-radius: 12px; background: none; color: var(--tg-texto); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.tg-aviso:is(:hover, :focus-visible) { outline: 0; background: var(--tg-hover); }
.tg-aviso:focus-visible { box-shadow: inset 0 0 0 2px var(--tg-foco); }
.tg-aviso.ok { --tg-a-cor: var(--tg-ok); --tg-a-claro: var(--tg-ok-claro); }
.tg-aviso.aviso { --tg-a-cor: var(--tg-aviso); --tg-a-claro: var(--tg-aviso-claro); }
.tg-aviso.perigo { --tg-a-cor: var(--tg-perigo); --tg-a-claro: var(--tg-perigo-claro); }
.tg-aviso.info { --tg-a-cor: var(--tg-info); --tg-a-claro: var(--tg-info-claro); }
.tg-aviso-ico { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 11px; background: var(--tg-a-claro); color: var(--tg-a-cor); }
.tg-aviso-ico .tg-ico { width: 18px; height: 18px; }
.tg-aviso-corpo { flex: 1; min-width: 0; }
.tg-aviso-corpo b { display: block; font-weight: 500; }
.tg-aviso-corpo small { display: block; color: var(--tg-suave); font-size: 12.5px; }
.tg-aviso-corpo time { display: block; margin-top: 2px; color: var(--tg-suave); font-size: 11.5px; }
/* nao lido: titulo mais forte e um ponto na direita */
.tg-aviso.novo .tg-aviso-corpo b { font-weight: 600; }
.tg-aviso-novo { flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--tg-destaque); }
.tg-avisos-nada { margin: 0; padding: 32px 16px; color: var(--tg-suave); text-align: center; }
.tg-avisos-todos { display: block; padding: 12px; border-top: 1px solid var(--tg-linha); color: var(--tg-realce); font-weight: 500; text-align: center; }
.tg-avisos-todos:hover { background: var(--tg-hover); }

/* ======================================================================
   Quadro de tarefas (kanban): <tg-quadro colunas='[...]' cartoes='[...]'> (js em tg.js)
   ====================================================================== */

tg-quadro { --tg-quadro-coluna: 250px; display: block; min-width: 0; font: 14px var(--tg-fonte); color: var(--tg-texto); }
tg-quadro *, tg-quadro *::before, tg-quadro *::after { box-sizing: border-box; }
tg-quadro[arrastando], tg-quadro[arrastando] .tg-quadro-cartao { cursor: grabbing; user-select: none; }
/* no celular as colunas viram abas: uma coluna por vez */
.tg-quadro-abas { display: none; gap: 6px; margin-bottom: 10px; padding-bottom: 2px; overflow-x: auto; scrollbar-width: none; }
.tg-quadro-aba { display: inline-flex; -webkit-tap-highlight-color: transparent; flex: none; align-items: center; gap: 7px; height: 34px; padding: 0 8px 0 13px; border: 1px solid var(--tg-linha); border-radius: 17px; background: var(--tg-superficie); color: var(--tg-suave); font: 500 13px var(--tg-fonte); white-space: nowrap; cursor: pointer; }
.tg-quadro-aba[aria-pressed="true"] { border-color: var(--tg-foco); background: var(--tg-primaria-claro); color: var(--tg-realce); }
.tg-quadro-rolagem { overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.tg-quadro-colunas { display: flex; align-items: flex-start; gap: 14px; min-width: min-content; }
.tg-quadro-coluna { display: flex; flex: 1 0 var(--tg-quadro-coluna); flex-direction: column; min-width: 0; padding: 10px; border: 1px solid var(--tg-linha); border-radius: 16px; background: var(--tg-fundo); }
.tg-quadro-coluna.cheia { border-color: color-mix(in srgb, var(--tg-perigo) 45%, var(--tg-linha)); }
.tg-quadro-coluna-cab { display: flex; align-items: center; gap: 8px; padding: 2px 4px 10px; }
.tg-quadro-coluna-cab h3 { flex: 1; min-width: 0; margin: 0; font-size: 13.5px; font-weight: 500; }
.tg-quadro-lista { display: grid; align-content: start; gap: 8px; min-height: 60px; }
.tg-quadro-vazia { margin: 0; padding: 18px 8px; border: 1px dashed var(--tg-linha); border-radius: 12px; color: var(--tg-suave); font-size: 12.5px; text-align: center; }
.tg-quadro-lista:has(> .tg-quadro-cartao:not([hidden])) > .tg-quadro-vazia { display: none; }
.tg-quadro-cartao { position: relative; display: grid; gap: 6px; padding: 8px 10px 10px 12px; border: 1px solid var(--tg-linha); border-radius: 12px; outline: 0; background: var(--tg-superficie); box-shadow: 0 1px 2px rgba(0, 30, 50, .05); cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transition: border-color .15s, box-shadow .15s, opacity .15s; }
.tg-quadro-cartao[hidden] { display: none; }
tg-quadro[sem-mover] .tg-quadro-cartao { cursor: pointer; user-select: auto; -webkit-user-select: auto; -webkit-touch-callout: default; }
.tg-quadro-cartao:hover { border-color: color-mix(in srgb, var(--tg-foco) 55%, var(--tg-linha)); }
.tg-quadro-cartao:focus-visible { border-color: var(--tg-foco); box-shadow: 0 0 0 3px var(--tg-foco-halo); }
/* prioridade: faixa na borda esquerda (o leitor de tela ouve o texto escondido) */
.tg-quadro-cartao[data-prioridade]::before { content: ""; position: absolute; top: 10px; bottom: 10px; left: -1px; width: 3px; border-radius: 0 3px 3px 0; }
.tg-quadro-cartao[data-prioridade="alta"]::before { background: var(--tg-perigo); }
.tg-quadro-cartao[data-prioridade="media"]::before { background: var(--tg-aviso); }
.tg-quadro-cartao[data-prioridade="baixa"]::before { background: var(--tg-info); }
/* o lugar do cartao enquanto ele e arrastado (o fantasma segue o ponteiro) ou levado pelo teclado */
.tg-quadro-cartao.arrastando { border-style: dashed; box-shadow: none; opacity: .45; }
.tg-quadro-cartao.pegado { border-color: var(--tg-foco); box-shadow: 0 0 0 3px var(--tg-foco-halo), var(--tg-sombra); transform: rotate(-1deg); }
.tg-quadro-cartao.salvando { opacity: .6; pointer-events: none; }
.tg-quadro-fantasma { position: fixed; z-index: 90; margin: 0; box-shadow: var(--tg-sombra); opacity: .96; transform: rotate(2deg); pointer-events: none; }
.tg-quadro-cartao-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; margin-right: -6px; }
.tg-quadro-codigo { color: var(--tg-suave); font-size: 11.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
.tg-quadro-cartao-cab .tg-acoes-botao { width: 28px; height: 28px; }
.tg-quadro-titulo { margin: -2px 0 0; font-size: 13.5px; font-weight: 500; line-height: 1.4; overflow-wrap: anywhere; }
.tg-quadro-titulo .tg-link { color: inherit; }
.tg-quadro-detalhe { margin: 0; color: var(--tg-suave); font-size: 12.5px; line-height: 1.4; }
.tg-quadro-etiquetas { display: flex; flex-wrap: wrap; gap: 5px; }
.tg-quadro-rodape { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.tg-quadro-prazo { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 6px; border-radius: 7px; background: color-mix(in srgb, var(--tg-suave) 10%, var(--tg-superficie)); color: var(--tg-suave); font-size: 12px; font-weight: 500; white-space: nowrap; }
.tg-quadro-prazo .tg-ico { width: 13px; height: 13px; }
.tg-quadro-prazo.perigo { background: var(--tg-perigo-claro); color: var(--tg-perigo-texto); }
.tg-quadro-prazo.aviso { background: var(--tg-aviso-claro); color: var(--tg-aviso-texto); }
.tg-quadro-prazo.info { background: var(--tg-info-claro); color: var(--tg-info-texto); }
.tg-quadro-pessoa { display: grid; flex: none; place-items: center; width: 26px; height: 26px; margin-left: auto; border-radius: 50%; background: var(--tg-primaria); color: #fff; font-size: 10.5px; font-weight: 500; }
.tg-quadro-novo { display: flex; align-items: center; justify-content: center; gap: 6px; height: 34px; margin-top: 8px; border: 0; border-radius: 10px; background: none; color: var(--tg-suave); font: 500 13px var(--tg-fonte); cursor: pointer; }
.tg-quadro-novo:hover { background: var(--tg-hover); color: var(--tg-realce); }
.tg-quadro-novo .tg-ico { width: 16px; height: 16px; }
@media (max-width: 720px) {
    .tg-quadro-abas { display: flex; }
    .tg-quadro-coluna { flex: 1 1 100%; }
    .tg-quadro-coluna:not(.ativa) { display: none; }
    .tg-quadro-coluna-cab { display: none; }
}

/* ======================================================================
   Conversa no registro: <tg-conversa mensagens='[...]' eu="u1"> (js em tg.js)
   ====================================================================== */

tg-conversa { --tg-conversa-altura: 460px; position: relative; display: flex; flex-direction: column; min-width: 0; font: 14px var(--tg-fonte); color: var(--tg-texto); }
tg-conversa *, tg-conversa *::before, tg-conversa *::after { box-sizing: border-box; }
.tg-conversa-lista { display: flex; flex-direction: column; gap: 4px; min-height: 120px; max-height: var(--tg-conversa-altura); padding: 4px 4px 14px; overflow-y: auto; outline: 0; overscroll-behavior: contain; scrollbar-width: thin; }
.tg-conversa-lista:focus-visible { border-radius: 12px; box-shadow: inset 0 0 0 2px var(--tg-foco-halo); }
.tg-conversa-vazia { margin: auto; padding: 24px; color: var(--tg-suave); font-size: 13px; text-align: center; }
.tg-conversa-dia { display: flex; align-items: center; gap: 10px; margin: 12px 0 4px; color: var(--tg-suave); font-size: 11.5px; font-weight: 500; }
.tg-conversa-dia::before, .tg-conversa-dia::after { content: ""; flex: 1; height: 1px; background: var(--tg-linha); }
.tg-conversa-sistema { align-self: center; max-width: 90%; margin: 6px 0; padding: 4px 12px; border-radius: 12px; background: color-mix(in srgb, var(--tg-suave) 9%, var(--tg-superficie)); color: var(--tg-suave); font-size: 12px; text-align: center; }
/* mensagem: as dos outros a esquerda, com a sigla; as minhas a direita, na cor da marca */
.tg-conversa-msg { display: flex; align-items: flex-end; gap: 8px; max-width: min(78%, 640px); margin-top: 8px; }
.tg-conversa-msg.agrupada { margin-top: 0; }
.tg-conversa-msg.minha { flex-direction: row-reverse; align-self: flex-end; }
.tg-conversa-avatar { display: grid; flex: none; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--tg-destaque) 22%, var(--tg-superficie)); color: color-mix(in srgb, var(--tg-realce) 80%, var(--tg-texto)); font-size: 11px; font-weight: 500; }
.tg-conversa-msg.minha .tg-conversa-avatar { display: none; }
.tg-conversa-msg.agrupada .tg-conversa-avatar { visibility: hidden; }
.tg-conversa-balao { min-width: 0; padding: 6px 12px 9px; border: 1px solid var(--tg-linha); border-radius: 14px 14px 14px 4px; background: var(--tg-superficie); }
.tg-conversa-msg.minha .tg-conversa-balao { border-color: transparent; border-radius: 14px 14px 4px 14px; background: var(--tg-primaria-claro); }
.tg-conversa-msg.enviando { opacity: .65; }
.tg-conversa-cab { display: flex; align-items: center; gap: 8px; min-height: 24px; font-size: 12px; }
.tg-conversa-cab b { font-weight: 500; }
.tg-conversa-msg.agrupada .tg-conversa-cab b { display: none; }
.tg-conversa-cab time, .tg-conversa-hora { color: var(--tg-suave); font-size: 11.5px; white-space: nowrap; }
.tg-conversa-editada { color: var(--tg-suave); font-size: 11.5px; font-style: italic; }
/* 0.23.0: etiquetas da mensagem ao lado do nome ("Interno", "1h 20min"), mais baixas que a do resto da tela */
.tg-conversa-cab .tg-etiqueta { padding: 1px 8px; font-size: 11.5px; }
/* o menu da mensagem aparece no mouse ou no foco; no toque, sempre */
.tg-conversa-cab tg-acoes { margin: -2px -8px -2px auto; opacity: 0; transition: opacity .15s; }
.tg-conversa-msg:hover .tg-conversa-cab tg-acoes, .tg-conversa-cab tg-acoes:focus-within, .tg-conversa-cab tg-acoes:has([aria-expanded="true"]) { opacity: 1; }
@media (hover: none) { .tg-conversa-cab tg-acoes { opacity: 1; } }
.tg-conversa-cab .tg-acoes-botao { width: 26px; height: 26px; }
.tg-conversa-texto { margin-top: 1px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.tg-mencao { padding: 0 3px; border-radius: 5px; background: color-mix(in srgb, var(--tg-destaque) 16%, transparent); color: var(--tg-realce); font-weight: 500; }
.tg-mencao.eu { background: var(--tg-aviso-claro); color: var(--tg-aviso-texto); }
.tg-conversa-arquivos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tg-conversa-arquivo { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 5px 10px 5px 8px; border: 1px solid var(--tg-linha); border-radius: 9px; background: var(--tg-superficie); color: var(--tg-texto); font-size: 12.5px; text-decoration: none; }
a.tg-conversa-arquivo:hover { border-color: var(--tg-foco); color: var(--tg-realce); }
.tg-conversa-arquivo span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tg-conversa-arquivo small { flex: none; color: var(--tg-suave); }
.tg-conversa-arquivo .tg-ico { width: 15px; height: 15px; color: var(--tg-suave); }
.tg-conversa-editor { display: grid; gap: 6px; min-width: min(420px, 64vw); margin-top: 4px; }
.tg-conversa-editor textarea { width: 100%; min-height: 60px; padding: 8px 10px; border: 1px solid var(--tg-foco); border-radius: 10px; outline: 0; background: var(--tg-foco-fundo); box-shadow: 0 0 0 3px var(--tg-foco-halo); color: var(--tg-texto); font: inherit; line-height: 1.5; resize: vertical; }
.tg-conversa-editor-botoes { display: flex; justify-content: flex-end; gap: 6px; }
/* lendo mais acima: o aviso da mensagem nova fica sobre o fim da lista */
.tg-conversa-novas { position: relative; z-index: 2; display: inline-flex; align-items: center; align-self: center; gap: 6px; height: 32px; margin: -44px 0 12px; padding: 0 12px 0 14px; border: 0; border-radius: 16px; background: var(--tg-primaria); color: #fff; font: 500 12.5px var(--tg-fonte); box-shadow: var(--tg-sombra); cursor: pointer; }
.tg-conversa-novas[hidden] { display: none; }
.tg-conversa-novas .tg-ico { width: 15px; height: 15px; }
/* campo de escrever: o mesmo foco dos campos (borda, halo e fundo claro) */
.tg-conversa-escrever { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--tg-linha); }
.tg-conversa-escrever[hidden] { display: none; }
.tg-conversa-caixa { display: flex; align-items: flex-end; gap: 4px; padding: 4px 4px 4px 12px; border: 1px solid var(--tg-linha); border-radius: 14px; background: var(--tg-superficie); transition: border-color .15s, box-shadow .15s, background .15s; }
.tg-conversa-caixa:focus-within { border-color: var(--tg-foco); background: var(--tg-foco-fundo); box-shadow: 0 0 0 3px var(--tg-foco-halo); }
.tg-conversa-caixa textarea { flex: 1; min-width: 0; height: 36px; min-height: 36px; max-height: 168px; margin: 0; padding: 8px 0; border: 0; outline: 0; background: transparent; color: var(--tg-texto); font: inherit; line-height: 1.45; resize: none; }
.tg-conversa-caixa textarea::placeholder { color: color-mix(in srgb, var(--tg-suave) 65%, var(--tg-superficie)); }
.tg-conversa-caixa .tg-btn-icone { flex: none; width: 36px; height: 36px; border-radius: 10px; }
.tg-conversa-caixa .tg-btn-icone .tg-ico { width: 18px; height: 18px; }
.tg-conversa-clipe[hidden] { display: none; }
.tg-conversa-dica { color: var(--tg-suave); font-size: 11.5px; }
@media (pointer: coarse) { .tg-conversa-dica { display: none; } }
.tg-conversa-anexando { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tg-conversa-anexando[hidden] { display: none; }
.tg-conversa-anexo { position: relative; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 32px; padding: 0 4px 0 9px; overflow: hidden; border: 1px solid var(--tg-linha); border-radius: 9px; background: var(--tg-superficie); font-size: 12.5px; }
.tg-conversa-anexo::before { content: ""; position: absolute; bottom: 0; left: 0; width: var(--tg-anexo); height: 3px; background: var(--tg-destaque); transition: width .2s; }
.tg-conversa-anexo.ok::before { display: none; }
.tg-conversa-anexo.erro { border-color: var(--tg-perigo); color: var(--tg-perigo); }
.tg-conversa-anexo.erro::before { display: none; }
.tg-conversa-anexo span { max-width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tg-conversa-anexo small { color: var(--tg-suave); font-variant-numeric: tabular-nums; }
.tg-conversa-anexo .tg-ico { width: 14px; height: 14px; }
.tg-conversa-anexo button { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--tg-suave); cursor: pointer; }
.tg-conversa-anexo button:hover { background: var(--tg-perigo-claro); color: var(--tg-perigo); }
/* @: quem pode ser chamado (camada de cima, em cima ou embaixo do campo) */
.tg-conversa-pessoas { position: fixed; inset: auto; z-index: 70; max-height: 280px; margin: 0; padding: 6px; overflow: auto; border: 1px solid var(--tg-linha); border-radius: 12px; background: var(--tg-superficie); color: var(--tg-texto); font: 14px var(--tg-fonte); box-shadow: var(--tg-sombra); }
.tg-conversa-pessoa { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: 0; border-radius: 9px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.tg-conversa-pessoa:hover, .tg-conversa-pessoa[aria-selected="true"] { background: var(--tg-primaria-claro); }
.tg-conversa-pessoa b { display: block; font-size: 13.5px; font-weight: 500; }
.tg-conversa-pessoa small { display: block; color: var(--tg-suave); font-size: 12px; }
.tg-conversa-pessoa .tg-conversa-avatar { width: 28px; height: 28px; }
@media (max-width: 600px) { .tg-conversa-msg { max-width: 90%; } }

/* ======================================================================
   Tela de entrada (login, esqueci a senha, nova senha): <body class="tg tg-entrada">
   ====================================================================== */

/* a marca do lado (no celular, em cima) e o cartao do formulario no meio do resto */
.tg-entrada { display: grid; grid-template-columns: minmax(320px, 44%) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; background: var(--tg-fundo); }
.tg-entrada-marca { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; overflow: hidden; padding: 40px 48px; background: linear-gradient(140deg, var(--tg-primaria) 0%, var(--tg-primaria-2) 100%); color: #fff; }
.tg-entrada-marca::after { content: ""; position: absolute; right: -120px; bottom: -120px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--tg-destaque) 45%, transparent), transparent 70%); pointer-events: none; }
.tg-entrada-marca .tg-marca { padding: 0; }
.tg-entrada-marca .tg-marca-selo { background: rgba(255, 255, 255, .16); box-shadow: none; }
.tg-entrada-marca .tg-marca-nome b { color: #fff; }
.tg-entrada-marca .tg-marca-nome small { color: rgba(255, 255, 255, .72); }
.tg-entrada-frase { position: relative; z-index: 1; max-width: 420px; }
.tg-entrada-frase h1 { color: #fff; font-size: 30px; }
.tg-entrada-frase p { margin-top: 10px; color: rgba(255, 255, 255, .8); font-size: 15px; }
.tg-entrada-rodape { position: relative; z-index: 1; color: rgba(255, 255, 255, .62); font-size: 12px; }
.tg-entrada-corpo { position: relative; z-index: 1; display: grid; place-items: center; padding: 32px 24px; }
.tg-entrada-cartao { display: grid; gap: 20px; width: min(420px, 100%); padding: 32px; border: 1px solid var(--tg-linha); border-radius: 22px; background: var(--tg-superficie); box-shadow: var(--tg-sombra-p); }
.tg-entrada-cartao > header h2 { font-size: 21px; font-weight: 600; }
.tg-entrada-cartao > header p { margin-top: 4px; color: var(--tg-suave); }
.tg-entrada-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; }
.tg-entrada-ajuda { color: var(--tg-suave); font-size: 13px; text-align: center; }
[data-tg-entrada-tela][hidden] { display: none; }
@media (max-width: 860px) {
    .tg-entrada { grid-template-columns: minmax(0, 1fr); align-content: start; }
    .tg-entrada-marca { gap: 18px; padding: 24px 20px 56px; }
    .tg-entrada-frase h1 { font-size: 22px; }
    .tg-entrada-frase p, .tg-entrada-rodape { display: none; }
    .tg-entrada-corpo { margin-top: -40px; padding: 0 16px 32px; }
    .tg-entrada-cartao { padding: 24px 20px; }
}

/* ======================================================================
   Antes -> depois (P07): <table class="tg-tabela tg-antes-depois"> (so CSS)
   ====================================================================== */

/* uma linha por campo: <tr class="mudou"><td>Campo</td><td class="antes">...</td><td class="depois">...</td></tr>.
   Quem desenha a tabela marca mudou (o servidor ou a tela comparam). O antes fica riscado, o depois
   em destaque, e a seta entre os dois e do CSS. Celula vazia aparece como "vazio". so-mudou na
   <table> esconde as linhas iguais. Valor em R$ ou quantidade: class="antes valor" */
.tg-antes-depois :is(th, td).depois { position: relative; padding-left: 40px; }
.tg-antes-depois td.depois::before { content: ""; position: absolute; top: 50%; left: 12px; width: 16px; height: 16px; margin-top: -8px; background: var(--tg-suave); opacity: .45; -webkit-mask: var(--tg-i-seta-ad) center / contain no-repeat; mask: var(--tg-i-seta-ad) center / contain no-repeat;
    --tg-i-seta-ad: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12h16m-6-6 6 6-6 6'/></svg>"); }
.tg-antes-depois td:is(.antes, .depois) { color: var(--tg-suave); }
.tg-antes-depois tr.mudou td.antes { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--tg-suave) 55%, transparent); }
.tg-antes-depois tr.mudou td.depois { color: var(--tg-texto); font-weight: 500; }
.tg-antes-depois tr.mudou td.depois::before { background: var(--tg-destaque); opacity: 1; }
/* faixa na esquerda: a linha que mudou se acha de olho */
.tg-antes-depois tr.mudou td:first-child { box-shadow: inset 3px 0 0 var(--tg-destaque); }
.tg-antes-depois td:is(.antes, .depois):empty::after { content: "vazio"; color: var(--tg-suave); font-weight: 400; font-style: italic; }
/* campo que nao existia antes: o "vazio" nao e riscado */
.tg-antes-depois tr.mudou td.antes:empty { text-decoration: none; }
.tg-antes-depois.so-mudou tbody tr:not(.mudou) { display: none; }
@media (max-width: 640px) {
    .tg-antes-depois thead { display: none; }
    .tg-antes-depois, .tg-antes-depois tbody { display: block; }
    .tg-antes-depois tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 0; padding: 10px 16px; border-bottom: 1px solid var(--tg-linha); }
    .tg-antes-depois tbody tr:last-child { border-bottom: 0; }
    .tg-antes-depois td { padding: 0; border: 0; }
    .tg-antes-depois td:first-child { grid-column: 1 / -1; font-size: 12.5px; font-weight: 500; }
    .tg-antes-depois tr.mudou td:first-child { box-shadow: none; }
    .tg-antes-depois tr.mudou { box-shadow: inset 3px 0 0 var(--tg-destaque); }
    .tg-tabela.tg-antes-depois td.valor { text-align: left; }
    .tg-antes-depois td.depois { padding-left: 30px; }
    .tg-antes-depois td.depois::before { left: 6px; }
}

/* ======================================================================
   Barra de progresso (P04): <div class="tg-progresso ok" role="progressbar" aria-valuenow="62">
   ====================================================================== */

/* a largura vem de --tg-progresso (0% a 100%); em HTML puro o tg.js le o aria-valuenow.
   --tg-previsto (opcional) marca o planejado com um traco. Cor: ok, aviso, perigo ou a da marca */
.tg-progresso { --tg-p-cor: var(--tg-primaria); display: flex; align-items: center; gap: 10px; min-width: 0; }
.tg-progresso.ok { --tg-p-cor: var(--tg-ok); }
.tg-progresso.aviso { --tg-p-cor: var(--tg-aviso); }
.tg-progresso.perigo { --tg-p-cor: var(--tg-perigo); }
.tg-progresso-barra { position: relative; flex: 1; min-width: 48px; height: 8px; border-radius: 6px; background: color-mix(in srgb, var(--tg-primaria) 10%, var(--tg-superficie)); }
.tg-progresso-barra::before { content: ""; position: absolute; inset: 0 auto 0 0; width: clamp(0%, var(--tg-progresso, 0%), 100%); border-radius: inherit; background: var(--tg-p-cor); transition: width .3s ease; }
.tg-progresso-barra::after { content: ""; position: absolute; top: -3px; bottom: -3px; left: clamp(0%, var(--tg-previsto, -10%), 100%); width: 2px; margin-left: -1px; border-radius: 1px; background: var(--tg-texto); opacity: .55; }
.tg-progresso:not([style*="--tg-previsto"]) .tg-progresso-barra::after { display: none; }
.tg-progresso-texto { flex: none; min-width: 40px; color: var(--tg-suave); font-size: 12.5px; font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; }
.tg-progresso.ok .tg-progresso-texto { color: var(--tg-ok-texto); }
.tg-progresso.aviso .tg-progresso-texto { color: var(--tg-aviso-texto); }
.tg-progresso.perigo .tg-progresso-texto { color: var(--tg-perigo-texto); }
/* fina: dentro da tabela e do indicador */
.tg-progresso.fina { gap: 8px; }
.tg-progresso.fina .tg-progresso-barra { height: 5px; border-radius: 3px; }
.tg-progresso.fina .tg-progresso-texto { min-width: 34px; font-size: 12px; }
.tg-tabela td .tg-progresso { min-width: 120px; }
.tg-indicador .tg-progresso { margin-top: 8px; }

/* ======================================================================
   Nota (aviso fixo dentro da tela) e estados
   ====================================================================== */

.tg-nota { --tg-m-cor: var(--tg-info); --tg-m-claro: var(--tg-info-claro); display: flex; gap: 12px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--tg-m-cor) 25%, var(--tg-superficie)); border-radius: 12px; background: var(--tg-m-claro); }
.tg-nota > .tg-ico { color: var(--tg-m-cor); }
.tg-nota b { display: block; }
.tg-nota p { color: var(--tg-suave); font-size: 13px; }

.tg-vazio { display: grid; justify-items: center; gap: 8px; padding: 36px 20px; color: var(--tg-suave); text-align: center; }
.tg-vazio-ico { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 4px; border-radius: 18px; background: var(--tg-primaria-claro); color: var(--tg-realce); }
.tg-vazio-ico .tg-ico { width: 26px; height: 26px; }
.tg-vazio b { color: var(--tg-texto); font-size: 15px; }
.tg-vazio p { max-width: 360px; }
.tg-esqueleto { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--tg-linha) 25%, color-mix(in srgb, var(--tg-linha) 40%, var(--tg-superficie)) 50%, var(--tg-linha) 75%); background-size: 200% 100%; animation: tg-brilho 1.2s linear infinite; }
@keyframes tg-brilho { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* cor por tipo: mensagem, dialogo e nota */
:is(.tg-msg, .tg-dialogo, .tg-nota).ok { --tg-m-cor: var(--tg-ok); --tg-m-claro: var(--tg-ok-claro); }
:is(.tg-msg, .tg-dialogo, .tg-nota):is(.erro, .perigo) { --tg-m-cor: var(--tg-perigo); --tg-m-claro: var(--tg-perigo-claro); }
:is(.tg-msg, .tg-dialogo, .tg-nota).aviso { --tg-m-cor: var(--tg-aviso); --tg-m-claro: var(--tg-aviso-claro); }
:is(.tg-msg, .tg-dialogo, .tg-nota).info { --tg-m-cor: var(--tg-info); --tg-m-claro: var(--tg-info-claro); }

/* ======================================================================
   Caixa de mensagem (tg.mensagem)
   ====================================================================== */

.tg-mensagens { position: fixed; top: 76px; right: 20px; z-index: 1000; display: grid; gap: 10px; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.tg-msg { position: relative; display: grid; grid-template-columns: 36px 1fr 28px; align-items: start; gap: 12px; overflow: hidden; padding: 14px 12px 15px 14px; border: 1px solid var(--tg-linha); border-radius: 14px; background: var(--tg-superficie); box-shadow: var(--tg-sombra); pointer-events: auto; animation: tg-entra .25s ease; }
.tg-msg.saindo { animation: tg-sai .2s ease forwards; }
.tg-msg-ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--tg-m-claro); color: var(--tg-m-cor); }
.tg-msg b { display: block; font-size: 13.5px; line-height: 1.35; }
.tg-msg p { margin-top: 2px; color: var(--tg-suave); font-size: 12.5px; }
.tg-msg-fechar { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--tg-suave); }
.tg-msg-fechar:hover { background: var(--tg-fundo); color: var(--tg-texto); }
.tg-msg-fechar .tg-ico { width: 16px; height: 16px; }
.tg-msg-tempo { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--tg-m-cor); transform-origin: left; animation: tg-tempo linear forwards; }
.tg-msg:hover .tg-msg-tempo { animation-play-state: paused; }
@keyframes tg-entra { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
@keyframes tg-sai { to { opacity: 0; transform: translateX(24px); } }
@keyframes tg-tempo { to { transform: scaleX(0); } }
@media (max-width: 860px) { .tg-mensagens { top: 66px; left: 16px; right: 16px; width: auto; } }

/* ======================================================================
   Dialogo (tg.alerta, tg.confirmar)
   ====================================================================== */

/* margin: auto centraliza o <dialog> modal; o reset do Tailwind (* { margin: 0 }) tira o do navegador */
.tg-dialogo { width: min(440px, calc(100vw - 32px)); max-width: none; margin: auto; padding: 0; border: 0; border-radius: 20px; background: var(--tg-superficie); color: var(--tg-texto); box-shadow: 0 24px 60px rgba(0, 30, 50, .28); }
.tg-dialogo[open] { animation: tg-dialogo-entra .2s ease; }
.tg-dialogo::backdrop { background: rgba(10, 25, 35, .45); backdrop-filter: blur(2px); }
.tg-dialogo-corpo { display: grid; grid-template-columns: 48px 1fr; gap: 16px; padding: 24px 24px 6px; }
.tg-dialogo-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: var(--tg-m-claro); color: var(--tg-m-cor); }
.tg-dialogo-ico .tg-ico { width: 24px; height: 24px; }
.tg-dialogo h2 { margin: 2px 0 0; font-size: 17px; }
.tg-dialogo p { margin: 6px 0 0; color: var(--tg-suave); }
.tg-dialogo-botoes { display: flex; justify-content: flex-end; gap: 10px; padding: 18px 24px 22px; }
@keyframes tg-dialogo-entra { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@media (max-width: 640px) {
    .tg-dialogo { width: 100%; margin: auto 0 0; border-radius: 22px 22px 0 0; }
    .tg-dialogo[open] { animation-name: tg-dialogo-sobe; }
    .tg-dialogo-botoes { padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
    .tg-dialogo-botoes .tg-btn { flex: 1; height: 46px; }
}
@keyframes tg-dialogo-sobe { from { transform: translateY(100%); } }

/* ======================================================================
   Carregando (tg.carregando) e Aguarde (tg.aguarde)
   ====================================================================== */

.tg-barra-carregando { position: fixed; top: 0; left: 0; right: 0; z-index: 1100; height: 3px; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity .2s; }
.tg-barra-carregando.ativa { opacity: 1; transition-delay: .25s; }
.tg-barra-carregando::before { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; background: var(--tg-destaque); animation: tg-barra 1.1s ease-in-out infinite; }
@keyframes tg-barra { to { left: 100%; } }
.tg-aguarde { position: fixed; inset: 0; z-index: 1050; display: grid; place-items: center; background: color-mix(in srgb, var(--tg-fundo) 60%, transparent); backdrop-filter: blur(2px); animation: tg-entra .2s ease; }
.tg-aguarde-caixa { display: flex; align-items: center; gap: 12px; padding: 16px 22px; border-radius: 16px; background: var(--tg-superficie); box-shadow: var(--tg-sombra); font-weight: 500; }
.tg-girador { flex: none; width: 22px; height: 22px; border: 3px solid var(--tg-primaria-claro); border-top-color: var(--tg-primaria); border-radius: 50%; animation: tg-girar .8s linear infinite; }

/* ================================================================
   Visualizador: tg.visualizar({ url, nome, tipo, baixar })
   ================================================================ */
html { --tg-visualizador-largura: 46vw; }
.tg-visualizador { position: fixed; inset: 0 0 0 auto; z-index: 40; width: var(--tg-visualizador-largura); max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; border-left: 1px solid var(--tg-linha); overflow: hidden; background: var(--tg-superficie); color: var(--tg-texto); box-shadow: -12px 0 32px rgba(0, 30, 50, .14); }
.tg-visualizador[open] { display: flex; flex-direction: column; animation: tg-gaveta-entra .2s ease; }
.tg-visualizador:focus { outline: 0; }
.tg-visualizador::backdrop { background: rgba(10, 25, 35, .3); }
@media (min-width: 1001px) { .tg-visualizando .tg-casca { margin-right: var(--tg-visualizador-largura); } }
@media (max-width: 1000px) { .tg-visualizador { width: 100%; border-left: 0; } }
.tg-visualizador-cab { display: flex; align-items: center; gap: 6px; min-height: 58px; padding: 8px 10px 8px 16px; border-bottom: 1px solid var(--tg-linha); }
.tg-visualizador-cab > .tg-ico { flex: none; color: var(--tg-realce); }
.tg-visualizador-cab h2 { flex: 1; min-width: 0; margin: 0; overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.tg-visualizador-pagina { color: var(--tg-suave); font-size: 13px; white-space: nowrap; }
.tg-visualizador-pagina i { font-style: normal; }
.tg-visualizador-zoom { display: flex; align-items: center; }
.tg-visualizador-zoom[hidden] { display: none; }
.tg-visualizador-zoom output { min-width: 46px; color: var(--tg-suave); font-size: 13px; text-align: center; }
.tg-visualizador-corpo { position: relative; flex: 1; min-height: 0; overflow: auto; padding: 16px; background: var(--tg-fundo); }
.tg-visualizador-corpo:focus { outline: 0; }
.tg-visualizador-corpo:focus-visible { box-shadow: inset 0 0 0 2px var(--tg-foco); }
.tg-visualizador-corpo.inteiro { padding: 0; overflow: hidden; }
.tg-visualizador-corpo > iframe { display: block; width: 100%; height: 100%; border: 0; }
.tg-visualizador-corpo > img { display: block; margin: 0 auto; }
.tg-visualizador-corpo > pre { margin: 0; color: var(--tg-texto); font: 13px/1.5 ui-monospace, Consolas, monospace; overflow-wrap: anywhere; white-space: pre-wrap; }
.tg-visualizador-folha { width: 100%; margin: 0 auto 14px; background: #fff; box-shadow: var(--tg-sombra-p); }
.tg-visualizador-folha:last-child { margin-bottom: 0; }
.tg-visualizador-folha canvas { display: block; width: 100%; height: 100%; }
@media (max-width: 640px) {
    .tg-visualizador-cab { gap: 0; min-height: 52px; padding: 6px 4px 6px 12px; }
    .tg-visualizador-cab > .tg-ico { display: none; }
    .tg-visualizador-aba { width: 40px; padding: 0; border-color: transparent; background: none; }
    .tg-visualizador-aba span { display: none; }
    .tg-visualizador-cab h2 { font-size: 14px; }
    .tg-visualizador-pagina { padding-inline: 6px; font-size: 12px; }
    .tg-visualizador-pagina i, .tg-visualizador-zoom output { display: none; }
    .tg-visualizador-corpo { padding: 8px; }
}

/* ======================================================================
   Gaveta lateral: <dialog class="tg tg-gaveta"> (tg.gaveta, data-tg-gaveta)
   ====================================================================== */

.tg-gaveta { position: fixed; inset: 0 0 0 auto; width: min(480px, 100vw); max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 22px 0 0 22px; background: var(--tg-superficie); color: var(--tg-texto); box-shadow: -20px 0 60px rgba(0, 30, 50, .25); }
.tg-gaveta[open] { display: flex; flex-direction: column; animation: tg-gaveta-entra .25s ease; }
.tg-gaveta::backdrop { background: rgba(10, 25, 35, .45); backdrop-filter: blur(2px); }
.tg-gaveta > form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.tg-gaveta-cab { display: flex; align-items: flex-start; gap: 12px; padding: 20px 22px 16px; border-bottom: 1px solid var(--tg-linha); }
.tg-gaveta-cab > div { flex: 1; min-width: 0; }
.tg-gaveta-cab small { display: block; color: var(--tg-suave); font-size: 12px; }
.tg-gaveta-cab h2 { margin: 0; font-size: 18px; }
.tg-gaveta-cab p { margin: 4px 0 0; color: var(--tg-suave); font-size: 13px; }
.tg-gaveta-corpo { display: grid; align-content: start; gap: 16px; flex: 1; min-height: 0; overflow-y: auto; padding: 20px 22px; }
.tg-gaveta-rodape { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--tg-linha); background: var(--tg-fundo); }
@keyframes tg-gaveta-entra { from { transform: translateX(100%); } }
@media (max-width: 640px) {
    .tg-gaveta { width: 100vw; border-radius: 0; }
    .tg-gaveta-rodape .tg-btn { flex: 1; }
}

/* ======================================================================
   Janela de escolha (tg.escolher, <tg-combo janela>)
   ====================================================================== */

.tg-escolha { width: min(560px, calc(100vw - 32px)); max-width: none; height: min(620px, calc(100dvh - 48px)); max-height: none; margin: auto; padding: 0; border: 0; border-radius: 20px; overflow: hidden; background: var(--tg-superficie); color: var(--tg-texto); box-shadow: 0 24px 60px rgba(0, 30, 50, .28); }
.tg-escolha[open] { display: flex; flex-direction: column; animation: tg-dialogo-entra .2s ease; }
.tg-escolha:focus { outline: 0; }
.tg-escolha::backdrop { background: rgba(10, 25, 35, .45); backdrop-filter: blur(2px); }
.tg-escolha-cab { display: flex; align-items: flex-start; gap: 12px; padding: 20px 16px 12px 22px; }
.tg-escolha-cab > div { flex: 1; min-width: 0; }
.tg-escolha-cab h2 { margin: 6px 0 0; font-size: 18px; }
.tg-escolha-cab p { margin: 4px 0 0; color: var(--tg-suave); font-size: 13px; }
.tg-escolha-busca { display: flex; align-items: center; gap: 10px; height: 46px; margin: 0 22px; padding: 0 14px; border: 1px solid var(--tg-linha); border-radius: 14px; background: var(--tg-fundo); color: var(--tg-suave); transition: border-color .15s, box-shadow .15s, background .15s; }
.tg-escolha-busca:focus-within { border-color: var(--tg-foco); background: var(--tg-foco-fundo); box-shadow: 0 0 0 3px var(--tg-foco-halo); }
.tg-escolha-busca input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--tg-texto); font: 15px var(--tg-fonte); }
.tg-escolha-lista { display: grid; align-content: start; gap: 6px; flex: 1; min-height: 0; margin: 12px 0 0; padding: 2px 22px 14px; overflow-y: auto; list-style: none; scrollbar-width: thin; }
.tg-escolha-opcao { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--tg-linha); border-radius: 14px; background: var(--tg-superficie); cursor: pointer; transition: border-color .12s, background .12s; }
.tg-escolha-opcao.ativo { border-color: var(--tg-foco); background: var(--tg-primaria-claro); }
.tg-escolha-sigla { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 12px; background: var(--tg-primaria-claro); color: var(--tg-realce); font-size: 12.5px; font-weight: 500; }
.tg-escolha-opcao.ativo .tg-escolha-sigla { background: var(--tg-superficie); }
.tg-escolha-texto { flex: 1; min-width: 0; }
.tg-escolha-texto b { display: block; overflow: hidden; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.tg-escolha-texto small { display: block; overflow: hidden; color: var(--tg-suave); font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }
.tg-escolha-marca { width: 18px; height: 18px; color: var(--tg-realce); visibility: hidden; }
.tg-escolha-opcao[aria-selected="true"] .tg-escolha-marca { visibility: visible; }
.tg-escolha-nada { padding: 28px 12px; color: var(--tg-suave); text-align: center; }
.tg-escolha-rodape { display: flex; justify-content: space-between; gap: 12px; padding: 10px 22px; border-top: 1px solid var(--tg-linha); background: var(--tg-fundo); color: var(--tg-suave); font-size: 12px; }
.tg-escolha-rodape kbd, .tg-checklist kbd { padding: 0 5px; border: 1px solid var(--tg-linha); border-radius: 5px; background: var(--tg-superficie); font: 11px var(--tg-fonte); }
@media (max-width: 640px) {
    .tg-escolha { width: 100%; height: 92dvh; margin: auto 0 0; border-radius: 22px 22px 0 0; }
    .tg-escolha[open] { animation-name: tg-dialogo-sobe; }
    .tg-escolha-rodape > span:last-child { display: none; }
}

/* ======================================================================
   Listagem: filtros, chips, tabela em cartoes, lista de itens, selecao, paginacao
   ====================================================================== */

.tg-filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--tg-linha); }
.tg-filtros .tg-campo { flex: 1 1 170px; }
.tg-filtros .tg-campo :is(input:not([type="checkbox"], [type="radio"]), select):not(tg-combo *, tg-combo-multi *), .tg-filtros .tg-combo-gatilho { height: 38px; }
.tg-filtros .tg-combo-limpar { top: 7px; }

/* chip de filtro: <label class="tg-chip"><input type="radio" name="..." hidden>Texto</label> */
.tg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tg-chip { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px; border: 1px solid var(--tg-linha); border-radius: 16px; background: var(--tg-superficie); color: var(--tg-suave); font-size: 12.5px; font-weight: 500; white-space: nowrap; cursor: pointer; user-select: none; transition: background .15s, border-color .15s, color .15s; }
.tg-chip:hover { border-color: var(--tg-foco); color: var(--tg-realce); }
.tg-chip input { display: none; }
.tg-chip:has(input:checked), .tg-chip.ativo, .tg-chip[aria-pressed="true"] { border-color: var(--tg-foco); background: var(--tg-primaria-claro); color: var(--tg-realce); }
.tg-chip:has(input:focus-visible) { outline: 2px solid var(--tg-destaque); outline-offset: 2px; }
.tg-chip .tg-conta { min-width: 18px; padding: 0 5px; }

/* lista de itens (caixa de entrada, mural) */
.tg-lista { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; margin: 0; padding: 0; list-style: none; }
.tg-item { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--tg-linha); transition: background .12s; }
.tg-item:last-child { border-bottom: 0; }
.tg-item:hover { background: var(--tg-hover); }
.tg-item-corpo { flex: 1; min-width: 0; }
.tg-item-corpo b { display: block; overflow: hidden; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.tg-item-corpo small { display: block; overflow: hidden; color: var(--tg-suave); font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }
.tg-item-lado { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; color: var(--tg-suave); font-size: 12px; white-space: nowrap; }
.tg-item.inativo > :not(tg-acoes) { opacity: .55; }
@media (max-width: 640px) { .tg-item { padding-inline: 16px; } }

/* cartao selecionavel: clicar marca a caixa (tg.js); selecionado fica destacado */
.tg-sel { cursor: pointer; }
.tg-sel:has(input[type="checkbox"]:checked), .tg-sel:has(input[type="checkbox"]:checked) td { background: var(--tg-primaria-claro); }
.tg-sel input[type="checkbox"] { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--tg-primaria); cursor: pointer; }

/* barra de acoes da selecao, presa embaixo da lista */
.tg-selecao { position: sticky; bottom: 16px; z-index: 15; display: flex; align-items: center; gap: 12px; margin: 0 auto; padding: 8px 8px 8px 18px; border-radius: 16px; background: var(--tg-texto); color: var(--tg-superficie); box-shadow: var(--tg-sombra); animation: tg-entra .2s ease; }
.tg-selecao > span { flex: 1; font-weight: 500; }
.tg-selecao .tg-btn-texto { color: var(--tg-superficie); }
.tg-selecao .tg-btn-texto:hover { background: rgba(255, 255, 255, .12); }
.tg-selecao[hidden] { display: none; }

/* paginacao */
.tg-paginacao { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--tg-linha); color: var(--tg-suave); font-size: 12.5px; }
.tg-paginas { display: flex; gap: 4px; }
.tg-paginas > :is(a, button, span) { display: grid; place-items: center; min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid transparent; border-radius: 9px; background: none; color: var(--tg-texto); font: 500 13px var(--tg-fonte); text-decoration: none; }
.tg-paginas > :is(a, button):hover { background: var(--tg-hover); color: var(--tg-realce); }
.tg-paginas > [aria-current="page"] { background: var(--tg-primaria); color: #fff; }
.tg-paginas > :is([disabled], [aria-disabled="true"]) { opacity: .4; pointer-events: none; }
.tg-paginas .tg-ico { width: 16px; height: 16px; }

/* <tg-listagem>: busca, paginas e Exportar em volta da tabela que o servidor desenhou */
tg-listagem { display: block; min-width: 0; }
.tg-listagem-barra { align-items: center; padding-block: 12px; }
.tg-listagem-barra[hidden], .tg-listagem-vazia[hidden], tg-listagem > .tg-paginacao[hidden] { display: none; }
.tg-listagem-qtde { display: inline-flex; align-items: center; gap: 8px; color: var(--tg-suave); font-size: 13px; white-space: nowrap; }
.tg-listagem-qtde select { height: 34px; padding: 0 6px; border: 1px solid var(--tg-linha); border-radius: 9px; background: var(--tg-superficie); color: var(--tg-texto); font: 13px var(--tg-fonte); }
.tg-listagem-qtde select:focus-visible { border-color: var(--tg-foco); outline: 0; box-shadow: 0 0 0 3px var(--tg-foco-halo); }
.tg-listagem-busca { display: flex; align-items: center; gap: 8px; flex: 0 1 280px; min-width: 0; height: 38px; margin-left: auto; padding: 0 12px; border: 1px solid var(--tg-linha); border-radius: 10px; background: var(--tg-superficie); color: var(--tg-suave); transition: border-color .15s, box-shadow .15s, background .15s; }
.tg-listagem-busca:focus-within { border-color: var(--tg-foco); background: var(--tg-foco-fundo); box-shadow: 0 0 0 3px var(--tg-foco-halo); }
.tg-listagem-busca .tg-ico { flex: none; width: 16px; height: 16px; }
.tg-listagem-busca input { flex: 1; width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--tg-texto); font: 13.5px var(--tg-fonte); }
.tg-listagem-barra > tg-acoes:only-child { margin-left: auto; }
.tg-listagem-vazia { margin: 0; padding: 28px 20px; color: var(--tg-suave); text-align: center; }
.tg-listagem-cab img { height: 32px; }
.tg-listagem-cab > div { display: grid; gap: 2px; margin-left: auto; text-align: right; }
@media (max-width: 640px) { .tg-listagem-busca { flex: 1 1 100%; order: 3; margin-left: 0; } .tg-listagem-barra { justify-content: space-between; padding-inline: 16px; } }

/* tabela que vira cartoes no celular: <table class="tg-tabela tg-tabela-cartoes">, td.principal e td.acoes */
@media (max-width: 640px) {
    .tg-tabela-cartoes thead { display: none; }
    .tg-tabela-cartoes, .tg-tabela-cartoes tbody { display: block; }
    .tg-tabela-cartoes tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 14px 16px; border-bottom: 1px solid var(--tg-linha); }
    .tg-tabela-cartoes tbody tr:last-child { border-bottom: 0; }
    /* o que nao cabe ao lado do rotulo desce para a linha de baixo, em vez de vazar do cartao */
    .tg-tabela-cartoes td { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; grid-column: 1 / -1; padding: 0; border: 0; text-align: left !important; }
    .tg-tabela-cartoes tbody tr:hover td { background: none; }
    /* rodape de totais: uma faixa embaixo dos cartoes, com o nome da coluna em cada total */
    .tg-tabela-cartoes tfoot { display: block; }
    .tg-tabela-cartoes tfoot tr { border-top: 2px solid var(--tg-linha); border-bottom: 0; background: var(--tg-fundo); }
    .tg-tabela-cartoes tfoot :is(td, th) { padding: 0; border: 0; background: none; text-align: left; white-space: normal; }
    .tg-tabela-cartoes tfoot :is(td, th):empty { display: none; }
    .tg-tabela-cartoes td[data-rotulo]::before { content: attr(data-rotulo); flex: 0 0 96px; color: var(--tg-suave); font-size: 11.5px; font-weight: 500; }
    .tg-tabela-cartoes td.principal { display: block; grid-column: 1; grid-row: 1; font-size: 14px; }
    .tg-tabela-cartoes td.acoes { grid-column: 2; grid-row: 1; align-self: start; justify-content: flex-end; }
    .tg-tabela-cartoes tr:has(> td.sel) { grid-template-columns: auto minmax(0, 1fr) auto; }
    .tg-tabela-cartoes td.sel { grid-column: 1; grid-row: 1; }
    .tg-tabela-cartoes tr:has(> td.sel) td.principal { grid-column: 2; }
    .tg-tabela-cartoes tr:has(> td.sel) td.acoes { grid-column: 3; }
}

/* ======================================================================
   Lista de conferencia: <aside class="tg-checklist" data-tg-checklist="#form">
   ====================================================================== */

.tg-checklist { display: grid; gap: 12px; align-self: start; padding: 18px; border: 1px solid var(--tg-linha); border-radius: var(--tg-raio); background: var(--tg-superficie); box-shadow: var(--tg-sombra-p); }
.tg-checklist-titulo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0; font-weight: 500; }
.tg-checklist-conta { color: var(--tg-suave); font-size: 12px; font-weight: 500; }
.tg-checklist-barra { height: 6px; overflow: hidden; border-radius: 3px; background: var(--tg-fundo); }
.tg-checklist-barra::before { content: ""; display: block; width: var(--tg-progresso, 0%); height: 100%; border-radius: 3px; background: var(--tg-ok); transition: width .3s ease; }
.tg-checklist ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.tg-checklist li { display: flex; align-items: center; gap: 10px; color: var(--tg-suave); font-size: 13px; transition: color .2s; }
.tg-checklist li::before { content: ""; flex: none; width: 20px; height: 20px; border: 2px solid var(--tg-linha); border-radius: 50%; transition: background .2s, border-color .2s; }
.tg-checklist li.ok { color: var(--tg-texto); }
.tg-checklist li.ok::before { border-color: var(--tg-ok); background: var(--tg-ok) url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12 5 5 9-10'/></svg>") center / 12px no-repeat; }
.tg-checklist.completo { border-color: color-mix(in srgb, var(--tg-ok) 35%, var(--tg-superficie)); }
.tg-checklist-rodape { margin: 0; color: var(--tg-suave); font-size: 12px; }
.tg-checklist.completo .tg-checklist-rodape { color: var(--tg-ok); font-weight: 500; }

/* formulario com a lista ao lado (computador) ou em cima (celular) */
.tg-com-checklist { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; align-items: start; }
.tg-com-checklist > .tg-checklist { position: sticky; top: 84px; }
@media (max-width: 900px) { .tg-com-checklist { grid-template-columns: minmax(0, 1fr); } .tg-com-checklist > .tg-checklist { position: static; order: -1; } }

/* ======================================================================
   Agenda em grade: <tg-agenda> (js em tg.js)
   ====================================================================== */

tg-agenda { display: block; min-width: 0; font: 13px var(--tg-fonte); color: var(--tg-texto); --tg-agenda-max: 70vh; --tg-agenda-col: 150px; --tg-agenda-horas: 60px; }
tg-agenda *, tg-agenda *::before, tg-agenda *::after { box-sizing: border-box; }
.tg-agenda-rolagem { max-height: var(--tg-agenda-max); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.tg-agenda-grade { display: grid; grid-template-columns: var(--tg-agenda-horas) repeat(var(--tg-agenda-colunas), minmax(var(--tg-agenda-col), 1fr)); grid-template-rows: auto auto; min-width: min-content; }
.tg-agenda-canto { position: sticky; top: 0; left: 0; z-index: 6; grid-row: 1; grid-column: 1; background: var(--tg-superficie); border-bottom: 1px solid var(--tg-linha); }
.tg-agenda-cab { position: sticky; top: 0; z-index: 5; grid-row: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--tg-linha); border-left: 1px solid var(--tg-linha); background: var(--tg-superficie); }
.tg-agenda-cab b { overflow: hidden; font-size: 13px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.tg-agenda-cab small { grid-row: 2; overflow: hidden; color: var(--tg-suave); font-size: 11.5px; white-space: nowrap; text-overflow: ellipsis; }
.tg-agenda-cab .tg-conta { grid-column: 2; grid-row: 1 / span 2; }
.tg-agenda-horas { position: sticky; left: 0; z-index: 4; grid-row: 2; grid-column: 1; background: var(--tg-superficie); }
.tg-agenda-horas span { position: absolute; right: 10px; color: var(--tg-suave); font-size: 11px; font-weight: 400; transform: translateY(-50%); }
.tg-agenda-horas span:first-child { transform: translateY(2px); }
.tg-agenda-coluna { position: relative; grid-row: 2; border-left: 1px solid var(--tg-linha); }
.tg-agenda-slot { display: block; width: 100%; height: var(--tg-agenda-altura); margin: 0; padding: 0 8px; border: 0; border-bottom: 1px dashed color-mix(in srgb, var(--tg-linha) 75%, transparent); background: transparent; color: transparent; font: 500 11.5px var(--tg-fonte); text-align: left; cursor: pointer; }
.tg-agenda-slot.fim-hora { border-bottom: 1px solid var(--tg-linha); }
.tg-agenda-slot.passado { background: color-mix(in srgb, var(--tg-fundo) 70%, transparent); }
.tg-agenda-slot:hover, .tg-agenda-slot:focus-visible { background: var(--tg-primaria-claro); color: var(--tg-realce); outline: 0; }
.tg-agenda-slot:focus-visible { box-shadow: inset 0 0 0 2px var(--tg-foco); }

.tg-agenda-evento { --tg-a-cor: var(--tg-primaria); --tg-a-claro: var(--tg-primaria-claro); --tg-a-texto: var(--tg-realce); position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; overflow: hidden; padding: 5px 8px 5px 10px; border: 0; border-left: 3px solid var(--tg-a-cor); border-radius: 8px; background: var(--tg-a-claro); color: var(--tg-texto); font: 12px/1.3 var(--tg-fonte); text-align: left; cursor: pointer; box-shadow: 0 1px 2px rgba(0, 30, 50, .08); transition: box-shadow .15s, transform .15s; }
.tg-agenda-evento:hover, .tg-agenda-evento:focus-visible { z-index: 3; box-shadow: var(--tg-sombra-p), 0 0 0 1px var(--tg-a-cor); outline: 0; }
.tg-agenda-evento small { color: var(--tg-a-texto); font-size: 11px; font-weight: 500; white-space: nowrap; }
.tg-agenda-evento b { max-width: 100%; overflow: hidden; font-size: 12.5px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.tg-agenda-evento span { max-width: 100%; overflow: hidden; color: var(--tg-suave); white-space: nowrap; text-overflow: ellipsis; }
.tg-agenda-evento.curto { flex-direction: row; align-items: center; gap: 6px; padding-block: 2px; }
.tg-agenda-evento.curto span { display: none; }
/* evento com cor propria (ev.cor): o horario escurece um pouco, para cor clara continuar legivel */
.tg-agenda-evento[style*="--tg-a-cor"] small { color: color-mix(in srgb, var(--tg-a-cor) 65%, var(--tg-texto)); }
.tg-agenda-evento.ok { --tg-a-cor: var(--tg-ok); --tg-a-claro: var(--tg-ok-claro); --tg-a-texto: var(--tg-ok-texto); }
.tg-agenda-evento.aviso { --tg-a-cor: var(--tg-aviso); --tg-a-claro: var(--tg-aviso-claro); --tg-a-texto: var(--tg-aviso-texto); }
.tg-agenda-evento.perigo { --tg-a-cor: var(--tg-perigo); --tg-a-claro: var(--tg-perigo-claro); --tg-a-texto: var(--tg-perigo-texto); }
.tg-agenda-evento.info { --tg-a-cor: var(--tg-info); --tg-a-claro: var(--tg-info-claro); --tg-a-texto: var(--tg-info-texto); }
.tg-agenda-evento.bloqueio { --tg-a-cor: var(--tg-suave); background: repeating-linear-gradient(135deg, var(--tg-fundo) 0 7px, color-mix(in srgb, var(--tg-linha) 70%, var(--tg-superficie)) 7px 14px); cursor: default; box-shadow: none; }
.tg-agenda-evento.bloqueio:hover { box-shadow: none; }

.tg-agenda-agora { position: relative; z-index: 4; grid-row: 2; grid-column: 2 / -1; align-self: start; height: 0; border-top: 2px solid var(--tg-perigo); pointer-events: none; }
.tg-agenda-agora::before { content: ""; position: absolute; left: -5px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--tg-perigo); }
.tg-agenda-agora span { position: absolute; left: calc(-1 * var(--tg-agenda-horas) + 4px); top: -10px; padding: 1px 6px; border-radius: 6px; background: var(--tg-perigo-solido, var(--tg-perigo)); color: #fff; font-size: 10.5px; font-weight: 500; }
.tg-agenda-agora[hidden] { display: none; }

/* legenda dos tipos de evento */
.tg-legenda { display: flex; flex-wrap: wrap; gap: 14px; color: var(--tg-suave); font-size: 12px; }
.tg-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.tg-legenda i { width: 12px; height: 12px; border-left: 3px solid var(--tg-primaria); border-radius: 3px; background: var(--tg-primaria-claro); }
.tg-legenda i.ok { border-color: var(--tg-ok); background: var(--tg-ok-claro); }
.tg-legenda i.aviso { border-color: var(--tg-aviso); background: var(--tg-aviso-claro); }
.tg-legenda i.perigo { border-color: var(--tg-perigo); background: var(--tg-perigo-claro); }
.tg-legenda i.info { border-color: var(--tg-info); background: var(--tg-info-claro); }
.tg-legenda i.bloqueio { border-color: var(--tg-suave); background: repeating-linear-gradient(135deg, var(--tg-fundo) 0 3px, var(--tg-linha) 3px 6px); }
@media (max-width: 640px) { tg-agenda { --tg-agenda-col: 132px; --tg-agenda-horas: 50px; --tg-agenda-max: 65vh; } }

/* agenda: semana (coluna de hoje), arrastar e esticar */
.tg-agenda-cab.hoje b { color: var(--tg-realce); }
.tg-agenda-cab.hoje { box-shadow: inset 0 -2px 0 var(--tg-primaria); }
.tg-agenda-coluna.hoje { background: color-mix(in srgb, var(--tg-primaria-claro) 35%, transparent); }
.tg-agenda-evento.movel { cursor: grab; }
.tg-agenda-alca { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; cursor: ns-resize; }
.tg-agenda-alca::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 18px; height: 3px; margin-left: -9px; border-radius: 2px; background: var(--tg-a-cor); opacity: 0; transition: opacity .15s; }
.tg-agenda-evento:hover .tg-agenda-alca::after, .tg-agenda-evento:focus-visible .tg-agenda-alca::after { opacity: .5; }
tg-agenda[arrastando], tg-agenda[arrastando] * { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.tg-agenda-evento.arrastando { z-index: 6; box-shadow: var(--tg-sombra), 0 0 0 1px var(--tg-a-cor); transition: none; }
.tg-agenda-evento.salvando, .tg-agenda-chip.salvando { opacity: .6; pointer-events: none; }

/* agenda: mes */
.tg-agenda-mes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: auto repeat(var(--tg-agenda-semanas, 5), minmax(var(--tg-agenda-dia, 112px), auto)); border-top: 1px solid var(--tg-linha); border-left: 1px solid var(--tg-linha); }
.tg-agenda-mes-cab { padding: 8px 10px; border-right: 1px solid var(--tg-linha); border-bottom: 1px solid var(--tg-linha); background: var(--tg-superficie); color: var(--tg-suave); font-size: 12px; font-weight: 500; }
.tg-agenda-dia { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 4px 4px 6px; border-right: 1px solid var(--tg-linha); border-bottom: 1px solid var(--tg-linha); background: var(--tg-superficie); cursor: pointer; transition: background .12s; }
.tg-agenda-dia:hover { background: color-mix(in srgb, var(--tg-primaria-claro) 45%, var(--tg-superficie)); }
.tg-agenda-dia.fora { background: var(--tg-fundo); }
.tg-agenda-dia.fora .tg-agenda-dia-num { color: var(--tg-suave); }
.tg-agenda-dia.alvo { background: var(--tg-primaria-claro); box-shadow: inset 0 0 0 2px var(--tg-foco); }
.tg-agenda-dia-num { align-self: flex-start; display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border: 0; border-radius: 14px; background: none; color: var(--tg-texto); font: 500 13px var(--tg-fonte); cursor: pointer; }
.tg-agenda-dia-num:hover, .tg-agenda-dia-num:focus-visible { background: var(--tg-hover); outline: 0; }
.tg-agenda-dia-num:focus-visible { box-shadow: 0 0 0 2px var(--tg-foco); }
.tg-agenda-dia.hoje .tg-agenda-dia-num { background: var(--tg-primaria); color: #fff; }
.tg-agenda-chip { --tg-a-cor: var(--tg-primaria); --tg-a-claro: var(--tg-primaria-claro); display: flex; align-items: center; gap: 5px; min-width: 0; padding: 2px 6px; border: 0; border-left: 3px solid var(--tg-a-cor); border-radius: 6px; background: var(--tg-a-claro); color: var(--tg-texto); font: 11.5px/1.35 var(--tg-fonte); text-align: left; cursor: pointer; }
.tg-agenda-chip small { flex: none; color: var(--tg-a-cor); font-size: 10.5px; font-weight: 500; }
.tg-agenda-chip b { overflow: hidden; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.tg-agenda-chip:hover, .tg-agenda-chip:focus-visible { box-shadow: 0 0 0 1px var(--tg-a-cor); outline: 0; }
.tg-agenda-chip.movel { cursor: grab; }
.tg-agenda-chip.arrastando { opacity: .4; }
.tg-agenda-chip.ok { --tg-a-cor: var(--tg-ok); --tg-a-claro: var(--tg-ok-claro); }
.tg-agenda-chip.aviso { --tg-a-cor: var(--tg-aviso); --tg-a-claro: var(--tg-aviso-claro); }
.tg-agenda-chip.perigo { --tg-a-cor: var(--tg-perigo); --tg-a-claro: var(--tg-perigo-claro); }
.tg-agenda-chip.info { --tg-a-cor: var(--tg-info); --tg-a-claro: var(--tg-info-claro); }
.tg-agenda-chip.bloqueio { --tg-a-cor: var(--tg-suave); background: repeating-linear-gradient(135deg, var(--tg-fundo) 0 5px, color-mix(in srgb, var(--tg-linha) 70%, var(--tg-superficie)) 5px 10px); }
.tg-agenda-fantasma { position: fixed; z-index: 90; margin: 0; box-shadow: var(--tg-sombra); opacity: .96; pointer-events: none; }
.tg-agenda-mais { align-self: flex-start; padding: 1px 6px; border: 0; border-radius: 6px; background: none; color: var(--tg-realce); font: 500 11.5px var(--tg-fonte); cursor: pointer; }
.tg-agenda-mais:hover, .tg-agenda-mais:focus-visible { background: var(--tg-hover); outline: 0; }
@media (max-width: 640px) {
    tg-agenda { --tg-agenda-dia: 64px; }
    .tg-agenda-mes-cab { padding: 6px 2px; text-align: center; font-size: 11px; }
    .tg-agenda-dia { align-items: center; gap: 2px; padding: 3px 2px; }
    .tg-agenda-dia-num { align-self: center; min-width: 26px; height: 26px; padding: 0 4px; font-size: 12px; }
    /* no celular o dia mostra so tracos coloridos: o toque abre o dia */
    .tg-agenda-chip { width: 100%; height: 5px; padding: 0; border: 0; border-radius: 3px; background: var(--tg-a-cor); pointer-events: none; }
    .tg-agenda-chip > * { display: none; }
    .tg-agenda-mais { padding: 0; font-size: 10px; pointer-events: none; }
}

/* ======================================================================
   Densidade compacta: data-tg-densidade="compacta" no <html> (tg.densidade) ou num container.
   Mais linhas na tela para quem passa o dia em tabela (financeiro, relatorio). No toque continua
   tudo do tamanho normal: dedo precisa de 40 px
   ====================================================================== */

@media (pointer: fine) {
    [data-tg-densidade="compacta"] .tg-btn { height: 34px; padding: 0 13px; border-radius: 10px; font-size: 13px; }
    [data-tg-densidade="compacta"] .tg-btn-icone { width: 34px; padding: 0; }
    [data-tg-densidade="compacta"] .tg-btn-p { height: 28px; padding: 0 10px; border-radius: 8px; font-size: 12px; }
    [data-tg-densidade="compacta"] .tg-btn-p.tg-btn-icone { width: 28px; padding: 0; }
    [data-tg-densidade="compacta"] .tg-lateral-criar { height: 40px; }

    [data-tg-densidade="compacta"] .tg-form { gap: 12px; }
    [data-tg-densidade="compacta"] .tg-campo { gap: 4px; }
    [data-tg-densidade="compacta"] .tg-campo :is(input:not([type="checkbox"], [type="radio"]), select):not(tg-combo *, tg-combo-multi *),
    [data-tg-densidade="compacta"] .tg-combo-gatilho { height: 36px; font-size: 13.5px; }
    [data-tg-densidade="compacta"] .tg-campo textarea { min-height: 76px; padding-block: 7px; }
    [data-tg-densidade="compacta"] .tg-filtros .tg-campo :is(input:not([type="checkbox"], [type="radio"]), select):not(tg-combo *, tg-combo-multi *),
    [data-tg-densidade="compacta"] .tg-filtros .tg-combo-gatilho { height: 34px; }
    [data-tg-densidade="compacta"] .tg-combo-limpar { top: 6px; }
    [data-tg-densidade="compacta"] .tg-filtros .tg-combo-limpar { top: 5px; }
    [data-tg-densidade="compacta"] .tg-data-botao { top: 3px; width: 30px; height: 30px; }

    [data-tg-densidade="compacta"] .tg-tabela { font-size: 13px; }
    [data-tg-densidade="compacta"] .tg-tabela th { padding: 8px 12px; }
    [data-tg-densidade="compacta"] .tg-tabela td { padding: 6px 12px; }
    [data-tg-densidade="compacta"] .tg-tabela td small { font-size: 11.5px; }

    [data-tg-densidade="compacta"] .tg-grade, [data-tg-densidade="compacta"] .tg-conteudo { gap: 14px; }
    [data-tg-densidade="compacta"] .tg-cartao-cab { padding: 11px 16px; }
    [data-tg-densidade="compacta"] .tg-cartao-corpo:not(.sem-espaco) { padding: 16px; }
    [data-tg-densidade="compacta"] .tg-filtros { gap: 10px; padding: 11px 16px; }
    [data-tg-densidade="compacta"] .tg-item { gap: 12px; padding: 8px 16px; }
    [data-tg-densidade="compacta"] .tg-paginacao { padding: 8px 16px; }
    [data-tg-densidade="compacta"] .tg-paginas > :is(a, button, span) { min-width: 28px; height: 28px; }
    [data-tg-densidade="compacta"] .tg-chip { height: 28px; padding: 0 11px; }
    [data-tg-densidade="compacta"] .tg-aba { height: 32px; }

    [data-tg-densidade="compacta"] .tg-topo { height: 56px; }
    [data-tg-densidade="compacta"] .tg-menu-item { min-height: 36px; padding-block: 6px; }
    [data-tg-densidade="compacta"] .tg-faixa { padding-top: 18px; padding-bottom: 58px; }
}

/* ======================================================================
   Impressao: data-tg="imprimir" ou tg.imprimir('#id')
   ====================================================================== */

/* cabecalho que so sai no papel: <div class="tg-impressao-cab tg-so-impressao"> com a marca, o
   titulo e <span data-tg-emitido></span> (o tg.js poe a data e a hora) */
.tg-so-impressao { display: none !important; }
.tg-impressao-cab { align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid var(--tg-texto); }
.tg-impressao-cab .tg-marca { padding: 0; }
.tg-impressao-cab small, .tg-impressao-cab [data-tg-emitido] { color: var(--tg-suave); font-size: 11px; }

@media print {
    @page { margin: 14mm 12mm; }
    /* papel sempre claro, mesmo com o modo escuro ligado na tela */
    :root, [data-tg-modo], [data-tg-modo] [data-tg-tema] { color-scheme: light; --tg-fundo: #fff; --tg-superficie: #fff; --tg-texto: #111; --tg-suave: #555; --tg-linha: #cfd6da; --tg-realce: var(--tg-primaria); --tg-hover: #fff; }
    :where(.tg) { background: #fff; font-size: 12px; }
    .tg-so-impressao { display: block !important; }
    .tg-impressao-cab.tg-so-impressao { display: flex !important; }
    .tg-lateral, .tg-veu, .tg-topo, .tg-barra-inferior, .tg-mensagens, .tg-faixa .tg-faixa-voltar, .tg-faixa .tg-btn, .tg-filtros, .tg-paginacao,
    .tg-selecao, .tg-barra-botoes, :is(th, td).acoes, tg-acoes, .tg-nao-imprimir, .tg-barra-carregando { display: none !important; }
    .tg-casca, .tg-area { display: block; min-height: 0; }
    .tg-faixa { padding: 0 0 10px; background: none; color: var(--tg-texto); }
    .tg-faixa::before, .tg-faixa::after { display: none; }
    .tg-faixa-titulo h1, .tg-faixa h1 { color: var(--tg-texto); font-size: 20px; }
    .tg-faixa p, .tg-faixa small { color: var(--tg-suave); }
    .tg-conteudo { margin: 0; padding: 0; gap: 12px; }
    .tg-cartao { border-color: var(--tg-linha); box-shadow: none; break-inside: avoid-page; }
    .tg-cartao-cab, .tg-cartao-corpo, .tg-cartao-rodape { padding: 10px 12px; }
    .tg-tabela-rolagem, .tg-tabela-rolagem.alta { max-height: none; overflow: visible; }
    .tg-tabela { font-size: 11px; }
    .tg-tabela thead { display: table-header-group; }
    .tg-tabela tfoot { display: table-footer-group; }
    .tg-tabela tr { break-inside: avoid; }
    .tg-tabela :is(th, td) { position: static !important; padding: 6px 8px; box-shadow: none !important; }
    .tg-tabela th { background: #eef1f3; }
    a { color: inherit; }
    /* sem isso o navegador tira o fundo das etiquetas, contadores e barras */
    .tg-etiqueta, .tg-conta, .tg-progresso, .tg-barras-trilho, .tg-legenda i, .tg-tabela th, .tg-tabela tfoot :is(td, th), .tg-indicador-ico, .tg-marca-selo { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    /* tg.imprimir('#id'): so o alvo e o caminho ate ele */
    .tg-imprimindo body > :not(.tg-impressao-caminho, .tg-impressao-alvo),
    .tg-imprimindo .tg-impressao-caminho > :not(.tg-impressao-caminho, .tg-impressao-alvo, .tg-impressao-cab) { display: none !important; }
    .tg-imprimindo .tg-impressao-caminho { margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; }
}

/* ======================================================================
   Troca de unidade: <tg-unidade> (js em tg.js)
   ====================================================================== */

tg-unidade { display: block; flex: none; min-width: 0; }
.tg-unidade-botao { display: flex; align-items: center; gap: 10px; max-width: 260px; height: 40px; padding: 0 10px 0 4px; border: 1px solid var(--tg-linha); border-radius: 12px; background: var(--tg-superficie); color: var(--tg-texto); font: inherit; text-align: left; cursor: pointer; transition: background .15s, border-color .15s, box-shadow .15s; }
button.tg-unidade-botao:hover { background: var(--tg-hover); }
.tg-unidade-botao:focus-visible { outline: 0; border-color: var(--tg-foco); box-shadow: 0 0 0 3px var(--tg-foco-halo); }
.tg-unidade-botao.fixa { padding-right: 14px; cursor: default; }
.tg-unidade-sigla { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 9px; background: var(--tg-primaria); color: #fff; font-size: 11.5px; font-weight: 500; }
.tg-unidade-texto { display: grid; min-width: 0; line-height: 1.2; }
.tg-unidade-texto small { overflow: hidden; color: var(--tg-suave); font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.tg-unidade-texto b { overflow: hidden; font-size: 13px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.tg-unidade-botao > .tg-ico { width: 16px; height: 16px; color: var(--tg-suave); }
tg-unidade[aria-busy] .tg-unidade-botao { opacity: .6; pointer-events: none; }
.tg-lateral tg-unidade { margin: 0 0 14px; }
.tg-lateral .tg-unidade-botao { width: 100%; max-width: none; height: 46px; padding-left: 7px; }
.tg-menu-recolhido .tg-lateral .tg-unidade-texto, .tg-menu-recolhido .tg-lateral .tg-unidade-botao > .tg-ico { display: none; }
@media (max-width: 860px) {
    /* no topo do celular, so a sigla, com largura fixa (o Safari mede o grupo pelo conteudo, A05) */
    .tg-topo .tg-unidade-texto, .tg-topo .tg-unidade-botao > .tg-ico { display: none; }
    .tg-topo .tg-unidade-botao { justify-content: center; width: 40px; padding: 0; }
}

/* ======================================================================
   Busca global: <tg-busca> (js em tg.js)
   ====================================================================== */

tg-busca { display: flex; flex: 1; min-width: 0; max-width: 520px; }
.tg-busca-gatilho { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; height: 40px; padding: 0 12px 0 14px; border: 1px solid var(--tg-linha); border-radius: 12px; background: var(--tg-fundo); color: var(--tg-suave); font: inherit; text-align: left; cursor: text; transition: border-color .15s, box-shadow .15s, background .15s; }
.tg-busca-gatilho:hover { border-color: color-mix(in srgb, var(--tg-foco) 45%, var(--tg-linha)); }
.tg-busca-gatilho:focus-visible { outline: 0; border-color: var(--tg-foco); background: var(--tg-foco-fundo); box-shadow: 0 0 0 3px var(--tg-foco-halo); }
.tg-busca-gatilho .tg-ico { width: 18px; height: 18px; }
.tg-busca-gatilho span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tg-busca-gatilho kbd, .tg-busca-item kbd { flex: none; padding: 1px 7px; border: 1px solid var(--tg-linha); border-radius: 6px; background: var(--tg-superficie); color: var(--tg-suave); font: 11px var(--tg-fonte); }
.tg-escolha.tg-busca-janela { height: min(580px, calc(100dvh - 48px)); margin: 8vh auto auto; }
.tg-busca-topo { display: flex; align-items: center; gap: 8px; padding: 18px 14px 6px 22px; }
.tg-busca-topo .tg-escolha-busca { flex: 1; margin: 0; }
.tg-busca-resultados { flex: 1; min-height: 0; padding: 0 22px 14px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.tg-busca-grupo { display: grid; gap: 6px; margin-top: 12px; }
.tg-busca-grupo-titulo { padding: 0 2px; color: var(--tg-suave); font-size: 12px; font-weight: 500; }
.tg-busca-item .tg-escolha-sigla .tg-ico { width: 18px; height: 18px; }
.tg-busca-item mark { background: none; color: var(--tg-realce); font-weight: 600; }
.tg-busca-nota { padding: 8px 12px; border: 1px dashed var(--tg-linha); border-radius: 14px; color: var(--tg-suave); font-size: 13px; }
.tg-busca-resultados .tg-escolha-nada { padding-top: 40px; }
@media (max-width: 860px) { .tg-busca-gatilho kbd { display: none; } }
@media (max-width: 640px) {
    .tg-escolha.tg-busca-janela { height: 92dvh; margin: auto 0 0; }
    .tg-busca-topo { padding: 16px 10px 4px 16px; }
    .tg-busca-resultados { padding: 0 16px 14px; }
    .tg-busca-item kbd { display: none; }
}

/* ======================================================================
   Paginas de estado: nao encontrada, sem permissao, erro, manutencao (so CSS)
   ====================================================================== */

.tg-estado { display: grid; justify-items: center; align-content: center; gap: 10px; min-height: min(68vh, 640px); padding: 48px 20px; text-align: center; }
.tg-estado.tela { min-height: 100dvh; }
.tg-estado.compacto { min-height: 0; padding: 28px 16px; }
.tg-estado-ico { display: grid; place-items: center; width: 92px; height: 92px; margin-bottom: 8px; border-radius: 28px; background: var(--tg-primaria-claro); color: var(--tg-realce); }
.tg-estado-ico .tg-ico { width: 40px; height: 40px; }
.tg-estado-ico.aviso { background: var(--tg-aviso-claro); color: color-mix(in srgb, var(--tg-aviso) 80%, var(--tg-texto)); }
.tg-estado-ico.perigo { background: var(--tg-perigo-claro); color: var(--tg-perigo); }
.tg-estado-ico.info { background: var(--tg-info-claro); color: var(--tg-info); }
.tg-estado-codigo { color: var(--tg-suave); font-size: 13px; font-weight: 500; }
.tg-estado h1, .tg-estado h2 { margin: 0; color: var(--tg-texto); font-size: 24px; font-weight: 600; line-height: 1.25; }
.tg-estado.compacto h1, .tg-estado.compacto h2 { font-size: 18px; }
.tg-estado.compacto .tg-estado-ico { width: 64px; height: 64px; border-radius: 20px; }
.tg-estado.compacto .tg-estado-ico .tg-ico { width: 28px; height: 28px; }
.tg-estado p { max-width: 480px; margin: 0; color: var(--tg-suave); }
.tg-estado-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 12px; }
.tg-estado-detalhe { margin-top: 8px; color: var(--tg-suave); font-size: 12px; }
.tg-estado-detalhe code { padding: 1px 6px; border-radius: 6px; background: var(--tg-fundo); font-size: 12px; }

/* ======================================================================
   Sem conexao e sessao (js em tg.js)
   ====================================================================== */

.tg-sem-conexao { position: fixed; inset: 14px auto auto 50%; z-index: 95; display: flex; align-items: center; gap: 10px; width: max-content; max-width: calc(100vw - 32px); height: auto; margin: 0; padding: 10px 16px; overflow: visible; border: 0; border-radius: 14px; background: #20303a; color: #fff; font: 13px/1.4 var(--tg-fonte); box-shadow: var(--tg-sombra); transform: translateX(-50%); animation: tg-entra .2s ease; }
.tg-sem-conexao .tg-ico { width: 18px; height: 18px; color: #ffb3a7; }
.tg-sem-conexao b { font-weight: 500; }
.tg-sessao-tempo { color: var(--tg-texto); font-variant-numeric: tabular-nums; }
tg-mascara[consultando]::after { content: ""; position: absolute; top: 50%; right: 12px; width: 16px; height: 16px; margin-top: -8px; border: 2px solid var(--tg-primaria-claro); border-top-color: var(--tg-primaria); border-radius: 50%; animation: tg-girar .8s linear infinite; pointer-events: none; }
@media print { .tg-sem-conexao { display: none; } }

/* ======================================================================
   Codigo de verificacao: <tg-codigo digitos="6"> (js em tg.js)
   Um <input> so (o celular oferece o codigo do SMS e o colar funciona), transparente por cima
   das caixas que mostram cada numero.
   ====================================================================== */
tg-codigo { position: relative; display: block; width: fit-content; max-width: 100%; }
tg-codigo > input.tg-codigo-campo[type] { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; box-shadow: none; color: transparent; caret-color: transparent; font-size: 16px; letter-spacing: 0; opacity: .01; cursor: text; }
tg-codigo > input.tg-codigo-campo::selection { background: transparent; }
.tg-codigo-caixas { display: grid; grid-template-columns: repeat(var(--tg-codigo-n, 6), minmax(0, 48px)); gap: 8px; }
.tg-codigo-caixas > span { display: grid; place-items: center; aspect-ratio: 48 / 56; border: 1px solid var(--tg-linha); border-radius: var(--tg-raio-p); background: var(--tg-superficie); color: var(--tg-texto); font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; transition: border-color .15s, box-shadow .15s, background .15s; }
.tg-codigo-caixas > span.cheia { border-color: color-mix(in srgb, var(--tg-foco) 55%, var(--tg-linha)); }
tg-codigo:focus-within .tg-codigo-caixas > span.atual { border-color: var(--tg-foco); background: var(--tg-foco-fundo); box-shadow: 0 0 0 3px var(--tg-foco-halo); }
tg-codigo:focus-within .tg-codigo-caixas > span.atual:empty::after { content: ""; width: 2px; height: 24px; background: var(--tg-realce); animation: tg-piscar 1s steps(1) infinite; }
tg-codigo[disabled] .tg-codigo-caixas > span { background: var(--tg-fundo); color: var(--tg-suave); }
.tg-campo.invalido tg-codigo .tg-codigo-caixas > span { border-color: var(--tg-perigo); }
@keyframes tg-piscar { 50% { opacity: 0; } }
.tg-entrada-cartao tg-codigo { margin: 0 auto; }

/* ======================================================================
   Editor de texto simples: <tg-editor name="texto"> (js em tg.js)
   ====================================================================== */
tg-editor { position: relative; display: grid; overflow: hidden; border: 1px solid var(--tg-linha); border-radius: var(--tg-raio-p); background: var(--tg-superficie); transition: border-color .15s, box-shadow .15s; }
tg-editor:focus-within { border-color: var(--tg-foco); box-shadow: 0 0 0 3px var(--tg-foco-halo); }
.tg-campo.invalido tg-editor { border-color: var(--tg-perigo); box-shadow: 0 0 0 3px var(--tg-perigo-claro); }
.tg-editor-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 5px 6px; border-bottom: 1px solid var(--tg-linha); background: var(--tg-fundo); }
.tg-editor-barra button { display: grid; place-items: center; width: 32px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--tg-suave); font: 600 14px var(--tg-fonte); cursor: pointer; }
.tg-editor-barra button:hover { background: var(--tg-hover); color: var(--tg-realce); }
.tg-editor-barra button[aria-pressed="true"] { background: var(--tg-primaria-claro); color: var(--tg-realce); }
.tg-editor-barra button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tg-editor-barra .tg-editor-sep { width: 1px; height: 18px; margin: 0 4px; background: var(--tg-linha); }
.tg-editor-area { position: relative; min-height: 120px; max-height: 420px; overflow-y: auto; padding: 11px 13px; outline: 0; color: var(--tg-texto); font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.tg-editor-area > * + * { margin-top: 8px; }
.tg-editor-area :is(ul, ol) { padding-left: 22px; }
.tg-editor-area ul { list-style: disc; }
.tg-editor-area ol { list-style: decimal; }
.tg-editor-area a { color: var(--tg-realce); text-decoration: underline; }
tg-editor.vazio .tg-editor-area::before { content: attr(data-placeholder); position: absolute; color: var(--tg-suave); pointer-events: none; }
tg-editor[disabled] .tg-editor-area { background: var(--tg-fundo); color: var(--tg-suave); }
tg-editor[disabled] .tg-editor-barra button { pointer-events: none; opacity: .5; }
.tg-editor-conta { padding: 0 13px 8px; color: var(--tg-suave); font-size: 11.5px; text-align: right; font-variant-numeric: tabular-nums; }
.tg-editor-conta.passou { color: var(--tg-perigo); font-weight: 500; }
/* o mesmo HTML limpo, mostrado fora do editor (comunicado, evolucao, resposta do chamado) */
.tg-texto-rico { line-height: 1.6; overflow-wrap: anywhere; }
.tg-texto-rico > * + * { margin-top: 8px; }
.tg-texto-rico :is(ul, ol) { padding-left: 22px; }
.tg-texto-rico ul { list-style: disc; }
.tg-texto-rico ol { list-style: decimal; }
.tg-texto-rico a { color: var(--tg-realce); text-decoration: underline; }

/* ======================================================================
   Filtros aplicados e filtros salvos: <tg-filtros-aplicados alvo="#filtros" chave="moradores">
   ====================================================================== */
tg-filtros-aplicados { display: block; }
.tg-aplicados { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 48px; padding: 8px 20px; border-bottom: 1px solid var(--tg-linha); font-size: 12.5px; }
.tg-aplicados-titulo { color: var(--tg-suave); font-weight: 500; }
.tg-aplicados-nenhum { color: var(--tg-suave); }
.tg-aplicado { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; height: 30px; padding: 0 4px 0 12px; border: 1px solid var(--tg-foco); border-radius: 15px; background: var(--tg-primaria-claro); color: var(--tg-realce); white-space: nowrap; }
.tg-aplicado > span { overflow: hidden; text-overflow: ellipsis; }
.tg-aplicado b { font-weight: 600; }
.tg-aplicado button { display: grid; flex: none; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
.tg-aplicado button:hover { background: color-mix(in srgb, var(--tg-realce) 14%, transparent); }
.tg-aplicado button .tg-ico { width: 13px; height: 13px; }
.tg-aplicados-limpar { padding: 4px 6px; border: 0; background: none; color: var(--tg-realce); font: 500 12.5px var(--tg-fonte); text-decoration: underline; cursor: pointer; }
.tg-aplicados-salvos { position: relative; margin-left: auto; }
.tg-aplicados-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; display: grid; width: 280px; max-width: calc(100vw - 32px); padding: 6px; border: 1px solid var(--tg-linha); border-radius: 14px; background: var(--tg-superficie); box-shadow: var(--tg-sombra); }
.tg-aplicados-menu[hidden] { display: none; }
.tg-aplicados-menu p { padding: 8px 10px; color: var(--tg-suave); font-size: 12.5px; }
.tg-aplicados-salvo { display: flex; align-items: center; gap: 4px; }
.tg-aplicados-menu button { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 9px 10px; border: 0; border-radius: 9px; background: none; color: var(--tg-texto); font: 13px var(--tg-fonte); text-align: left; cursor: pointer; }
.tg-aplicados-menu button:hover, .tg-aplicados-menu button:focus-visible { background: var(--tg-hover); color: var(--tg-realce); }
.tg-aplicados-menu button:disabled { background: none; color: var(--tg-suave); cursor: default; }
.tg-aplicados-salvo > button:first-child { flex: 1; }
.tg-aplicados-salvo > button:first-child span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tg-aplicados-salvo > button.excluir { flex: none; padding: 8px; color: var(--tg-suave); }
.tg-aplicados-salvo > button.excluir:hover { color: var(--tg-perigo); }
.tg-aplicados-menu .tg-ico { width: 16px; height: 16px; flex: none; }
.tg-aplicados-menu hr { margin: 4px 0; border: 0; border-top: 1px solid var(--tg-linha); }
@media (max-width: 640px) { .tg-aplicados { padding: 8px 14px; } .tg-aplicados-salvos { margin-left: 0; } .tg-aplicados-menu { right: auto; left: 0; } }
@media print { tg-filtros-aplicados :is(.tg-aplicados-salvos, button) { display: none; } }

/* ======================================================================
   Pedir um texto: tg.pedirTexto({ titulo, rotulo }) (nome do filtro salvo, por exemplo)
   ====================================================================== */
.tg-dialogo .tg-dialogo-campo { padding: 4px 24px 6px 88px; }
.tg-dialogo .tg-dialogo-campo .tg-campo { margin: 0; }
@media (max-width: 480px) { .tg-dialogo .tg-dialogo-campo { padding-left: 24px; } }

/* ======================================================================
   Instalar no celular (PWA): <button data-tg="instalar"> so aparece quando o navegador deixa
   ====================================================================== */
:root:not([data-tg-instalar]) [data-tg="instalar"] { display: none !important; }
:root[data-tg-instalado] .tg-so-navegador { display: none !important; }

/* ======================================================================
   Tela de entrada: codigo, bloqueio, convite e escolha da empresa
   ====================================================================== */
.tg-entrada-icone { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 4px; border-radius: 18px; background: var(--tg-primaria-claro); color: var(--tg-realce); }
.tg-entrada-icone .tg-ico { width: 26px; height: 26px; }
.tg-entrada-icone.perigo { background: var(--tg-perigo-claro); color: var(--tg-perigo); }
.tg-entrada-icone.aviso { background: var(--tg-aviso-claro); color: var(--tg-aviso); }
.tg-entrada-icone.ok { background: var(--tg-ok-claro); color: var(--tg-ok); }
.tg-entrada-ou { display: flex; align-items: center; gap: 12px; color: var(--tg-suave); font-size: 12px; }
.tg-entrada-ou::before, .tg-entrada-ou::after { content: ""; flex: 1; height: 1px; background: var(--tg-linha); }
.tg-entrada-alternativas { display: grid; gap: 10px; }
.tg-entrada-alternativas .tg-btn { justify-content: center; }
.tg-entrada-reenviar { color: var(--tg-suave); font-size: 13px; text-align: center; }
.tg-entrada-reenviar output { color: var(--tg-texto); font-weight: 500; font-variant-numeric: tabular-nums; }
.tg-entrada-lista { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tg-entrada-lista :is(button, a) { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 1px solid var(--tg-linha); border-radius: 14px; background: var(--tg-superficie); color: var(--tg-texto); font: 14px var(--tg-fonte); text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.tg-entrada-lista :is(button, a):hover { border-color: var(--tg-foco); background: var(--tg-foco-fundo); }
.tg-entrada-lista :is(button, a) > span:not(.tg-avatar) { display: grid; flex: 1; min-width: 0; }
.tg-entrada-lista small { color: var(--tg-suave); font-size: 12px; }
.tg-entrada-lista .tg-ico { width: 16px; height: 16px; color: var(--tg-suave); }
.tg-entrada-tempo { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--tg-fundo); text-align: center; }
.tg-entrada-tempo b { font-size: 24px; font-variant-numeric: tabular-nums; }
.tg-entrada-tempo small { color: var(--tg-suave); font-size: 12px; }
.tg-entrada-cartao > header .tg-avatar { width: 56px; height: 56px; margin-bottom: 4px; border-radius: 18px; font-size: 18px; }
.tg-link:disabled { background: none; color: var(--tg-suave); cursor: default; }

/* Celular com toque: campo com letra menor que 16px faz o Safari do iPhone dar zoom ao tocar,
   e a tela fica cortada dos lados (a janela de escolha, por exemplo). !important porque varios
   campos fixam a fonte com seletor mais forte (.tg-campo input, .tg-escolha-busca input). */
@media (pointer: coarse) {
    .tg :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"]), select, textarea) { font-size: 16px !important; }
}

}

/* ---------- Aviso de cookies e tour de primeiro uso (0.21.0) ---------- */
@layer tg {
    /* embutido por padrao (dentro da pagina); com o atributo fixo, vira o aviso do rodape */
    tg-cookies[fixo] > .tg-cookies { position: fixed; z-index: 1000; left: 16px; right: 16px; bottom: 16px; max-width: 760px; margin-inline: auto; }
    .tg-cookies {
        display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; justify-content: space-between;
        padding: 16px 18px; background: var(--tg-superficie); color: var(--tg-texto);
        border: 1px solid var(--tg-linha); border-radius: var(--tg-raio); box-shadow: var(--tg-sombra-p);
    }
    .tg-cookies-texto { flex: 1 1 320px; min-width: 0; }
    .tg-cookies-texto b { display: block; }
    .tg-cookies-texto p { margin: 4px 0 0; color: var(--tg-suave); }
    .tg-cookies-acoes { display: flex; flex-wrap: wrap; gap: 8px; }

    .tg-tour {
        position: fixed; z-index: 1000; right: 20px; bottom: 20px; width: min(360px, calc(100vw - 32px));
        display: grid; gap: 8px; padding: 16px 18px; background: var(--tg-superficie); color: var(--tg-texto);
        border: 1px solid var(--tg-linha); border-radius: var(--tg-raio); box-shadow: var(--tg-sombra-p);
    }
    .tg-tour p { margin: 0; }
    .tg-tour small { color: var(--tg-suave); }
    .tg-tour-botoes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
    .tg-tour-foco { outline: 3px solid var(--tg-destaque); outline-offset: 3px; border-radius: 8px; }
    @media (max-width: 640px) { .tg-tour { left: 16px; right: 16px; bottom: 88px; width: auto; } }
}