/* ===========================================================================
   MODO GABINETE — a folha das telas de trabalho (painel, configuração, minutas,
   modelos, importação, papel timbrado).

   ⚠️ **A fonte de verdade é `docs/design-system/README.md`**, e a referência
   visual navegável está em `docs/design-system/referencia/`. Nenhum valor daqui
   é escolha desta folha: cor, tipografia, espessura e as seis regras vêm de lá.
   Ao mexer, mexa lá primeiro — se os dois divergirem, o documento ganha.

   Por que existe uma segunda folha em vez de mais regras no `custom.css`: o
   neo-brutalismo da marca (borda de 3px, sombra dura, creme com grade de pontos,
   Archivo Black) dá a CADA elemento o mesmo peso. Numa landing isso é
   personalidade; numa lista que se usa todo dia, doze minutas viram doze blocos
   idênticos e ninguém acha nada. Aqui a hierarquia vem de peso, cor e divisória
   — nunca de moldura.

   Regras de convivência com o resto do CSS do site — não são negociáveis:

   1. NADA em seletor de elemento nu. Tudo sob `.gab*`.
   2. `custom.css` estiliza `input`, `textarea`, `.form-select`, `a`, `p` e
      `h1-h6` em seletor nu, e os campos com `!important`. Para um campo do
      gabinete valer são precisas DUAS coisas: `!important` (especificidade não
      vence `!important`) e especificidade maior que `input[type="text"]`
      (0,1,1) — daí o prefixo duplo `.gab .gab-busca input`. Faltando uma, nada
      acontece. Mesmo gotcha documentado em `minuta.css`.
   3. Não usar `.btn` aqui: são dezenas de `!important` a desfazer. As classes
      são próprias (`.gab-botao`, `.gab-acao`).
   =========================================================================== */

:root {
    /* ---- 01 · COR (design system, tabela "hex fixo — sem variação") -------
       ⚠️ Estes valores NÃO são os da landing. A landing (`landing.css`, tokens
       `--l-*`) segue no neobrutalismo com o amarelo #FFDC58 até migrar; aqui
       vale o design system. É por isso que o produto tem dois amarelos hoje, e
       a nota está registrada no README do design system. */
    --g-papel:       #FFFDF7;   /* fundo de tudo */
    --g-pergaminho:  #F6F2E6;   /* "fundo neutro": barra de ação, hover */
    --g-linha:       #E7E2D4;   /* divisória e grade */
    --g-linha-forte: #D9D3C2;   /* borda de campo secundário */
    --g-tinta:       #111010;   /* texto, borda de ênfase */
    --g-tinta-70:    #3C3C36;   /* prosa e valores */

    /* ⚠️ O design system pede `Tinta 25` (#8A8A80) no metadado em mono, e este
       token NÃO o usa: medido, #8A8A80 dá 3,43:1 sobre o papel, abaixo do
       mínimo AA de 4,5:1 — e o que ele pintaria é justamente texto de 10-11px,
       o tamanho em que a folga mais importa. `Tinta 45` dá 5,05:1. É a única
       divergência deliberada, e o repositório já tinha rejeitado #8A8477 (3,2:1)
       pelo mesmo motivo (ver `--l-fraco` no `landing.css`).
       ⚠️ O `chat.css` consome este token: a mudança vale lá junto. */
    --g-tenue:       #6E6E66;   /* rótulo secundário e metadado */
    --g-fraco:       #B0AB9C;   /* SÓ elemento não-textual: ponto "nenhum", borda tracejada */

    --g-marca:       #FBE38A;   /* amarelo AÇÃO: botão principal, item ativo */
    --g-aviso:       #FBEEB6;   /* amarelo AVISO: callout, badge */

    /* Semânticas, separadas do acento: o amarelo significa "primário", nunca
       "deu certo". Um estado que se confunde com um botão não é estado. */
    --g-ok:      #1F7A4D;
    --g-erro:    #C0392B;
    /* Extensão nossa — o design system não previu estado intermediário, e o
       produto tem dois reais ("revalidar", "falta descrever"). Sem uma terceira
       cor eles cairiam em vermelho, e "precisa de um passo" não é "quebrado".
       5,9:1 no papel. */
    --g-atencao: #A65B00;

    /* ---- O SEMÁFORO DA URGÊNCIA -----------------------------------------
       ⚠️ **Divergência registrada, e é do DONO** (29/08/2026): *"as cores que
       você usa é horrível, simplesmente não consigo enxergar facilmente o que é
       prioridade alta, normal e baixa. Assim, uso básico: vermelho, amarelo e
       verde."* O convencional do semáforo carrega mais informação, de mais
       longe, do que qualquer par de cinzas desta folha — e é o que legitima cor
       aqui, como já legitimava nas etiquetas.

       ⚠️ **O amarelo é #A67A00, e não um amarelo claro.** Medido contra o papel
       (#FFFDF7): o `--g-marca` (#FBE38A) dá **1,25:1** e some; um amarelo puro
       (#E6B800) dá 1,84:1. Os dois ficam abaixo do piso de **3:1** que a WCAG
       cobra de elemento gráfico não-textual. #A67A00 dá **3,83:1** — é o amarelo
       mais claro que ainda se enxerga sobre creme, e é o mesmo valor que a folha
       já usa em `--g-t-minuta`. Vermelho **5,35:1**, verde **5,23:1**.

       ⚠️ Estes tokens NÃO pintam texto. São o trilho de 6px do cartão e o fio
       dos degraus — os mesmos 3:1 que valem para a cor das etiquetas. */
    --g-prio-alta:   var(--g-erro);
    --g-prio-normal: #A67A00;
    --g-prio-baixa:  var(--g-ok);

    /* ---- 02 · TIPOGRAFIA -------------------------------------------------
       Os tokens `--gf-ui`, `--gf-prosa` e `--gf-mono` NÃO são declarados aqui:
       moram no `:root` do `custom.css`, que é a única folha que toda página
       carrega. O editor de minuta não carrega esta folha, e declarar lá teria
       deixado o cromo dele com a tipografia da landing enquanto a lista ao lado
       usa a nova. */

    /* Cor por tipo de peça — leitura de relance na lista. Não está no design
       system: é dado do domínio (despacho ≠ sentença), e entra no fio de 2px do
       chip de tipo, nunca em área chapada. */
    --g-t-minuta:    #A67A00;
    --g-t-despacho:  #4B72D6;
    --g-t-decisao:   #7B4FD1;
    --g-t-sentenca:  #C0396B;
    --g-t-relatorio: #0E8595;
}

/* --- shell ---------------------------------------------------------------- */

body.is-gabinete {
    background-color: var(--g-papel);
    background-image: none;      /* a grade de pontos vira ruído sob uma lista */
}
body.is-gabinete .gab-main { padding: 0; }

.gab {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    align-items: start;
    min-height: calc(100vh - 74px);
    font-family: var(--gf-ui);
    color: var(--g-tinta);
}
/* Telas do gabinete SEM lateral: a chave recém-criada e o guia `/comecar`. Nas
   duas a tarefa é única, e nove destinos ao lado são o convite a sair antes de
   terminá-la. O grid vira uma coluna só, centrada. */
.gab--solo { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.gab--solo .gab-painel { width: 100%; max-width: 62rem; }

.gab p { color: var(--g-tinta); }
/* `custom.css` sublinha todo link em amarelo e pinta o fundo no hover. Dentro
   do gabinete o link é estrutura de navegação, não citação.

   ⚠️ Sem `color` aqui, de propósito. `.gab a` tem especificidade (0,2,0) e
   venceria `.gab-botao` (0,1,0): o botão primário desenhado como <a> saía com
   texto cor de tinta sobre fundo de tinta — um retângulo preto vazio. Cada
   componente declara a própria cor; esta regra só desfaz o sublinhado e o fundo
   amarelo do hover. */
/* ⚠️ `custom.css` transforma TODO <label> em etiqueta monoespaçada, em caixa
   alta e com `!important` na fonte, no tamanho, no peso e na cor (linha 507).
   No gabinete o <label> envolve a zona de soltar arquivos e a opção de descrever
   com IA — frases inteiras, que saíam GRITADAS EM MONOESPAÇADO. Só o
   `text-transform` e o `letter-spacing` não têm `!important` lá; o resto precisa
   ser desfeito com `!important` daqui, e a especificidade `.gab label` (0,1,1)
   já basta contra `label` (0,0,1).

   ⚠️ E NADA de layout aqui: `.gab label` é (0,1,1) e venceria `.gab-opcao`
   (0,1,0). Um `display: revert` nesta regra transformou a zona de soltar e a
   opção de IA de volta em blocos, e elas se sobrepuseram na tela. Esta regra
   trata só do traje tipográfico que o custom.css impõe. */
.gab label {
    text-transform: none;
    letter-spacing: normal;
    font-family: var(--gf-ui) !important;
    font-size: inherit !important;
    font-weight: 400 !important;
    color: inherit !important;
}
/* Só as etiquetas de campo dos formulários do lote mantêm o traje de rótulo —
   e ele é MONO, porque rótulo é dado (regra 4 do design system). */
.gab .gab-campo > span {
    font-family: var(--gf-mono);
    text-transform: uppercase;
    letter-spacing: .1em;
}

/* --- prosa ----------------------------------------------------------------
   A serifa marca o texto que a pessoa lê para DECIDIR: a frase que diz o que a
   tela faz, a explicação de uma linha, a descrição do modelo, o aviso. Nunca
   rótulo, botão ou dado — se ela invadir a interface, a distinção some e a tela
   inteira vira documento.

   ⚠️ Isto NÃO é a serifa da prévia da minuta. Aquela é `Tinos`, métrica-
   compatível com Times New Roman, que é a fonte do `.docx` exportado: a prévia
   existe para a peça se parecer com o que vai ser impresso. Source Serif é a
   serifa da INTERFACE; Tinos é a do DOCUMENTO. -------------------------------- */
.gab-prosa,
.gab .gab-topo__sub,
.gab .gab-linha__corpo p,
.gab .gab-linha__dica,
.gab .gab-nota__corpo,
.gab .gab-nota__corpo p,
.gab .gab-item__desc,
.gab .gab-vazio p,
.gab .gab-faixa__texto,
.gab .gab-form__dica,
.gab .gab-lateral__pe p,
.gab .gab-aviso {
    font-family: var(--gf-prosa);
}
/* `code` no custom.css é amarelo chapado com borda de 2px — dentro de uma frase
   de apoio ele vira o elemento mais forte da tela. */
.gab code {
    background: var(--g-pergaminho);
    border: 1px solid var(--g-linha);
    color: var(--g-tenue);
    font-weight: 500;
    padding: 0 4px;
}

.gab a { text-decoration: none; font-weight: inherit; }
/* ⚠️ E o hover neutralizado só nos links SEM classe. `.gab a:hover` seria
   (0,2,1) e venceria `.gab-nav:hover` (0,2,0): a lateral inteira perderia o
   realce ao passar o mouse, e o motivo não estaria em lugar nenhum. Com
   `:not([class])` a regra alcança exatamente os links de texto corrido, que são
   os que o custom.css pintaria de amarelo. */
.gab a:not([class]):hover { background: transparent; }

/* --- lateral -------------------------------------------------------------- */

/* ⚠️ O fundo da lateral é o PAPEL, não mais o pergaminho. Com a navegação
   inteira aqui dentro (nove entradas em três grupos), a faixa creme virava um
   bloco de cor de ponta a ponta da tela ao lado de uma folha branca — e o que
   separa as duas colunas passa a ser o fio de 1px, que é a gramática do resto
   do sistema. */
.gab-lateral {
    position: sticky;
    top: 0;
    align-self: start;
    max-height: 100vh;
    overflow-y: auto;
    background: var(--g-papel);
    border-right: 1px solid var(--g-linha);
    padding: 1.1rem .8rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

/* O único elemento saturado do cromo, e o único que leva o amarelo da marca.

   ⚠️ A sombra dura de 3px SAIU. Ela chegava da landing e o argumento era "é a
   ação primária, é o mesmo gesto do `.land-btn`" — mas na landing esse botão
   aparece uma vez por página, e aqui ele fica no alto de uma lateral que
   acompanha o usuário em nove telas. O relevo puxava o olho para o mesmo ponto
   o tempo todo. O amarelo já basta para dizer qual é a ação primária; o que a
   sombra acrescentava era peso, não informação. */
.gab .gab-novo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .55rem;
    background: var(--g-marca);
    color: var(--g-tinta);
    font-family: var(--gf-ui);
    font-weight: 700;
    font-size: .84rem;
    border: 1px solid var(--g-tinta);
    transition: background .12s ease;
}
.gab-novo:hover { background: var(--nb-primary-d); color: var(--g-tinta); }

.gab-grupo { display: flex; flex-direction: column; gap: 1px; }
/* Rótulo de grupo da lateral (TRABALHO, GABINETE, CONTA) e das listas dobradas.
   Mono, e não a heading: é etiqueta de máquina, no mesmo registro das contagens
   e das datas. */
.gab-rotulo {
    font-family: var(--gf-mono);
    font-size: .62rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--g-tenue);
    padding: .7rem .5rem .3rem;
}
.gab-grupo:first-of-type > .gab-rotulo { padding-top: 0; }
.gab .gab-nav {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .42rem .55rem;
    border: 1px solid transparent;
    font-family: var(--gf-ui);
    font-size: .86rem;
    color: var(--g-tinta);
}
.gab-nav:hover { background: rgba(20, 20, 15, .05); color: var(--g-tinta); }
/* O item ativo é o segundo (e último) emprego do amarelo no cromo. Chapado e
   com fio de tinta, no molde da referência — o `rgba(...,.55)` de antes lavava
   a cor e o "onde estou" ficava a meio caminho entre ligado e desligado. */
.gab-nav[aria-current="page"] {
    background: var(--g-marca);
    border-color: var(--g-tinta);
    font-weight: 600;
}
.gab-nav__n {
    margin-left: auto;
    font-family: var(--gf-mono);
    font-size: .72rem;
    color: var(--g-tenue);
    font-variant-numeric: tabular-nums;
}
.gab-nav[aria-current="page"] .gab-nav__n { color: var(--g-tinta); }
/* O contador que COBRA (atrasadas + vencendo hoje), no único lugar da lateral
   onde um número quer dizer "abra isto agora". Âmbar, e não `--g-erro`: no
   design system o vermelho é reservado a destrutivo, e prazo vencido é urgência,
   não destruição. `--g-atencao` (#A65B00) dá 5,9:1 sobre o papel. */
.gab-nav__n--atencao { color: var(--g-atencao); font-weight: 700; }
.gab-nav[aria-current="page"] .gab-nav__n--atencao { color: var(--g-atencao); }
.gab-nav i { color: var(--g-tenue); font-size: .9rem; }
.gab-nav[aria-current="page"] i { color: var(--g-tinta); }

.gab .gab-recente {
    display: block;
    padding: .28rem .5rem;
    font-size: .78rem;
    color: var(--g-tenue);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gab-recente:hover { background: rgba(20, 20, 15, .05); color: var(--g-tinta); }

.gab-lateral__pe {
    margin-top: auto;
    padding: .7rem .5rem 0;
    border-top: 1px solid var(--g-linha);
    font-size: .72rem;
    color: var(--g-tenue);
}
.gab-lateral__pe a { text-decoration: underline; text-underline-offset: 2px; }
.gab-lateral__pe p { font-size: .72rem; color: var(--g-tenue); margin: 0 0 .35rem; line-height: 1.45; }

/* --- painel --------------------------------------------------------------- */

.gab-painel { min-width: 0; }

/* O cabeçalho da tela. Três coisas e uma régua: título (com a contagem em mono
   ao lado, que é onde o número informa sem virar faixa), a frase que diz o que
   a tela faz, e as ações à direita. */
.gab-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: .5rem 1rem;
    padding: 1.4rem 1.75rem 1.1rem;
}
/* ⚠️ GRID, e não flex. O bloco precisa de duas coisas ao mesmo tempo: o `<h1>`
   e a contagem lado a lado (com flex-column eles empilhariam, e "5 PEÇAS" virava
   um segundo subtítulo) e a frase de apoio numa linha própria, mas com a medida
   limitada a 62ch.

   Com FLEX isso não fecha: `flex: 0 0 100%` no `<p>` é clampado pelo
   `max-width: 62ch` ANTES do cálculo de quebra de linha — o item passa a medir
   ~492px, cabe ao lado do título e não quebra. Medido no navegador, em
   `/minutas/papel-timbrado`. `min-width: 100%` forçaria a quebra e mataria a
   medida junto.

   No grid o `<p>` ocupa a faixa inteira (`grid-column: 1 / -1`) e o `max-width`
   passa a limitar só o texto DENTRO dela. */
.gab-topo__id {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    align-items: baseline;
    gap: .3rem .7rem;
    min-width: 16rem;
}
.gab-topo h1 {
    font-family: var(--gf-ui);
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: -.02em;
}
/* A contagem ao lado do título — `5 prontos · 3 em preparo`. Na linha de base do
   h1 de propósito: é legenda dele, não uma segunda informação. */
.gab-topo__n {
    font-family: var(--gf-mono);
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--g-tenue);
}
.gab-topo__sub {
    grid-column: 1 / -1;
    margin: 0;
    font-size: .95rem;
    line-height: 1.5;
    color: var(--g-tinta-70);
    max-width: 62ch;
}
.gab-topo__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-left: auto; }

/* ⚠️ Sem régua entre o cabeçalho e o conteúdo. Uma primeira versão punha um
   `::before` de tinta aqui, e nas listas isso dava DUAS linhas fortes em cinco
   centímetros — a do cabeçalho e a que fecha a barra de filtros logo abaixo. A
   separação do cabeçalho é o espaço; a régua de tinta pertence a quem organiza
   o conteúdo (o cabeçalho de seção e a barra de filtros). */
.gab-conteudo { padding: .4rem 1.75rem 3.5rem; max-width: 1120px; }

/* Busca: ver a regra 2 do cabeçalho — o prefixo duplo é o que faz o
   `!important` daqui vencer o `input[type="text"]` do custom.css. */
.gab-busca {
    display: flex;
    align-items: center;
    gap: .4rem;
    background: var(--g-papel);
    border: 1px solid var(--g-linha);
    padding: .3rem .65rem;
}
.gab .gab-busca input {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    outline: 0 !important;
    padding: .18rem 0 !important;
    width: 15rem;
    max-width: 46vw;
    font-family: var(--gf-ui) !important;
    font-size: .84rem !important;
    color: var(--g-tinta) !important;
}
.gab .gab-busca input::placeholder { color: var(--g-tenue); opacity: 1; }
.gab-busca:focus-within { border-color: var(--g-tinta); }

.gab .gab-select {
    background: var(--g-papel) !important;
    color: var(--g-tinta) !important;
    border: 1px solid var(--g-linha) !important;
    border-radius: 0 !important;
    padding: .34rem .5rem !important;
    box-shadow: none !important;
    transform: none !important;
    font-family: var(--gf-ui) !important;
    font-size: .8rem !important;
}
.gab .gab-select:focus { border-color: var(--g-tinta) !important; box-shadow: none !important; }

/* --- botões --------------------------------------------------------------- */

.gab .gab-botao {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--gf-ui);
    font-weight: 600;
    font-size: .82rem;
    padding: .42rem .85rem;
    border: 1px solid var(--g-tinta);
    background: var(--g-tinta);
    color: var(--g-papel);
    cursor: pointer;
}
.gab .gab-botao:hover { background: #000; color: var(--g-papel); }
/* ⚠️ **O anel de foco tem de ser DAQUI** (01/09/2026, medido por tabulação em
   produção). O anel global do `custom.css:1662` tem lista fechada de seletores e
   **não cobre `button` nu**: o "Criar" da coluna do quadro chegava com
   `outline: auto 1px`, o anel do Chrome, enquanto tudo em volta usava o do
   sistema (2px em tinta). Não era foco invisível — era foco em outro idioma, e
   `.gab-botao`/`.gab-acao`/`.gab-novo` são os botões mais repetidos da área
   logada. `tarefas.css` já consertava onze casos um a um; a regra volta para
   onde o componente mora. */
.gab .gab-botao:focus-visible,
.gab .gab-acao:focus-visible,
.gab .gab-novo:focus-visible {
    outline: 2px solid var(--g-tinta);
    outline-offset: 2px;
}

/* A ação PRINCIPAL, no nível 1 do design system: fundo amarelo-ação e borda de
   tinta; no hover inverte (fundo tinta, texto amarelo). Vale no cabeçalho da
   tela ("Importar .docx") e na linha de configuração ("Alterar"). Não usar em
   item de lista repetido — lá é `.gab-acao--forte`, que existe justamente para
   não plantar vinte retângulos amarelos numa coluna. */
.gab .gab-botao--marca {
    background: var(--g-marca);
    color: var(--g-tinta);
    border-color: var(--g-tinta);
}
.gab .gab-botao--marca:hover { background: var(--g-tinta); color: var(--g-marca); }

/* Nível 3 — terciária: a ação que acompanha sem competir (Remover, Cancelar). */
.gab .gab-botao--fraco {
    background: transparent;
    color: var(--g-tenue);
    border-color: var(--g-linha);
    font-weight: 400;
}
.gab .gab-botao--fraco:hover { background: transparent; color: var(--g-tinta); border-color: var(--g-tinta); }
/* Destrutiva: parte da terciária e só se revela no hover. Vermelho em repouso
   transformaria "Apagar" no elemento mais forte de toda linha da tela. */
.gab .gab-botao--risco:hover { color: var(--g-erro); border-color: var(--g-erro); background: transparent; }

.gab .gab-botao--peq { padding: .32rem .7rem; font-size: .76rem; }

/* ⚠️ Precisa do prefixo `.gab`, como a regra base.

   `.gab .gab-botao` é (0,2,0) e `.gab-botao--calmo` era (0,1,0): a variante
   PERDIA e todo botão secundário saía preto, idêntico ao primário. Onde o
   `--calmo` marca a saída de um passo ("Fazer isso depois"), isso apagava a
   diferença entre seguir e pular — dois botões pretos lado a lado, e nenhum
   deles parecendo o secundário. Defeito de especificidade silencioso: o CSS
   estava lá e simplesmente não valia. */
.gab .gab-botao--calmo {
    background: var(--g-papel);
    color: var(--g-tinta);
    border-color: var(--g-linha);
    font-weight: 500;
}
.gab .gab-botao--calmo:hover {
    background: var(--g-pergaminho);
    color: var(--g-tinta);
    border-color: var(--g-tinta);
}
.gab .gab-botao[disabled] { opacity: .45; cursor: default; }

/* --- filtros: abas retas, não pílulas -------------------------------------

   Eram cápsulas de raio 999px, que é a forma de "etiqueta" — a mesma dos chips
   de tag do item. Duas coisas de natureza diferente com a mesma forma na mesma
   tela: uma filtra, a outra descreve. A aba reta em mono caixa-alta separa as
   duas de relance, e é o vocabulário da referência.
   -------------------------------------------------------------------------- */

/* A barra de filtros fecha com a régua de TINTA — é ela que separa "o que estou
   vendo" da lista, e é a única linha forte desta tela. */
.gab-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem;
    padding-bottom: .9rem;
    margin-bottom: 0;
    border-bottom: 1px solid var(--g-tinta);
}
.gab .gab-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .7rem;
    font-family: var(--gf-mono);
    font-size: .68rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    border: 1px solid var(--g-linha);
    background: transparent;
    color: var(--g-tenue);
    cursor: pointer;
}
.gab-chip:hover { border-color: var(--g-tinta); color: var(--g-tinta); background: transparent; }
.gab-chip.is-ativa {
    background: var(--g-tinta);
    border-color: var(--g-tinta);
    color: var(--g-papel);
}
.gab-chip.is-ativa:hover { color: var(--g-papel); }
.gab-chip__n { font-size: .68rem; font-variant-numeric: tabular-nums; opacity: .7; }
.gab-chip--atencao { border-color: #E0C79A; color: var(--g-atencao); }
.gab-chip--atencao:hover { border-color: var(--g-atencao); color: var(--g-atencao); }
/* Empurra para a direita o que vier depois — a nota de ordenação da lista. */
.gab-chips__nota {
    margin-left: auto;
    font-family: var(--gf-mono);
    font-size: .68rem;
    color: var(--g-tenue);
}

.gab-contagem {
    font-family: var(--gf-mono);
    font-size: .7rem;
    color: var(--g-tenue);
    margin: 0 0 .5rem;
    font-variant-numeric: tabular-nums;
}

/* --- lista ---------------------------------------------------------------- */

/* ⚠️ Sem `border-top`: quem fecha a barra de filtros é a régua de tinta do
   `.gab-chips`, e um fio claro logo abaixo dela daria duas linhas coladas. */
.gab-lista { border-top: 0; }
/* ⚠️ O trilho colorido de 3px à esquerda SAIU do grid. Ele existia para dar a
   leitura de relance por tipo, e continua existindo — mudou de lugar: virou o
   fio de 2px do chip `.gab-tipo`, dentro da meta. O motivo é que o trilho
   duplicava a informação (a cor à esquerda e o nome do tipo na meta) e, numa
   coluna de vinte itens, cravava uma serra colorida na margem esquerda da
   lista, que é justamente onde o olho procura o começo do título. */
.gab-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .5rem 1.25rem;
    align-items: start;
    padding: .95rem .25rem;
    border-bottom: 1px solid var(--g-linha);
}
.gab-item:hover { background: rgba(244, 239, 226, .5); }

.gab-item__corpo { min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.gab-item__cab { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.gab .gab-item__titulo {
    font-family: var(--gf-ui);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--g-tinta);
}
.gab .gab-item__titulo:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }

/* A prévia é a peça, na serifa em que ela vai ser impressa — é assim que se
   reconhece uma minuta, não pelo título digitado às pressas. Mesma lógica da
   Newsreader no chat: serifa marca texto de documento, sans marca cromo. */
.gab-item__previa {
    font-family: Tinos, "Times New Roman", Georgia, serif;
    font-size: .88rem;
    line-height: 1.5;
    color: var(--g-tinta-70);
    margin: 0;
    max-width: 70ch;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.gab-item__previa.is-vazia { font-style: italic; color: var(--g-tenue); }

/* A DESCRIÇÃO de um modelo ("quando usar") — prosa de interface, não a peça.
   Por isso Source Serif e não Tinos: ela foi escrita para ser lida na tela, e é
   o campo que decide qual modelo o agente escolhe. A família vem do bloco
   "prosa" acima. */
.gab-item__desc {
    font-size: .9rem;
    line-height: 1.5;
    color: var(--g-tinta-70);
    margin: 0;
    max-width: 76ch;
}
.gab-item__desc.is-vazia { font-style: italic; color: var(--g-tenue); }

/* A meta é toda em MONO: tipo, tamanho, procedência, data e CNJ são dado de
   máquina, e o mono os separa da prosa da prévia logo acima sem precisar de
   mais uma cor. */
.gab-item__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem .85rem;
    font-family: var(--gf-mono);
    font-size: .68rem;
    color: var(--g-tenue);
}
/* O tipo carrega a cor que era do trilho, num fio de 2px à esquerda do chip.
   Mesmo dado, um décimo do peso. */
.gab-item__meta .gab-tipo {
    font-family: var(--gf-ui);
    font-size: .72rem;
    font-weight: 500;
    color: var(--g-tinta);
    background: var(--g-pergaminho);
    border: 1px solid var(--g-linha);
    border-left-width: 2px;
    border-left-color: var(--g-tenue);
    padding: .1rem .45rem;
}
.gab-item[data-tipo="minuta"]    .gab-tipo { border-left-color: var(--g-t-minuta); }
.gab-item[data-tipo="despacho"]  .gab-tipo { border-left-color: var(--g-t-despacho); }
.gab-item[data-tipo="decisao"]   .gab-tipo { border-left-color: var(--g-t-decisao); }
.gab-item[data-tipo="sentenca"]  .gab-tipo { border-left-color: var(--g-t-sentenca); }
.gab-item[data-tipo="relatorio"] .gab-tipo { border-left-color: var(--g-t-relatorio); }
.gab-item__meta .gab-cnj { font-size: .68rem; }

/* Etiquetas do modelo (assunto, súmula, artigo). São o que faz alguém
   reconhecer a peça sem abrir, e estavam achatadas numa string única no fim da
   meta. Chip reto, mono, sem cor: descrevem, não filtram. */
.gab-tags { display: flex; flex-wrap: wrap; gap: .25rem; }
.gab-tag {
    font-family: var(--gf-mono);
    font-size: .66rem;
    color: var(--g-tenue);
    border: 1px solid var(--g-linha);
    padding: .1rem .4rem;
    white-space: nowrap;
}

/* As ações ficam SEMPRE legíveis, e agora sempre com moldura. Escondê-las até o
   hover é o que faz alguém concluir que não dá para baixar o .docx sem abrir a
   minuta — e no toque não existe hover. */
.gab-item__acoes { display: flex; align-items: center; gap: .3rem; }
.gab .gab-acao {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    border: 1px solid var(--g-linha);
    background: var(--g-papel);
    color: var(--g-tenue);
    padding: .28rem .7rem;
    font-family: var(--gf-ui);
    font-size: .78rem;
    cursor: pointer;
    white-space: nowrap;
    transition: color .12s, border-color .12s, background .12s;
}
.gab-acao:hover { border-color: var(--g-tinta); color: var(--g-tinta); background: var(--g-papel); }
/* A ação principal da LINHA (Abrir). Amarela na referência do usuário; aqui ela
   ganha o fio de tinta e o fundo claro da marca só no repouso — vinte botões
   chapados de amarelo numa coluna deixariam de apontar coisa alguma, que é a
   regra que este arquivo defende desde o começo. Ao passar o mouse na linha,
   ele fecha em amarelo pleno. */
.gab .gab-acao--forte {
    border-color: var(--g-tinta);
    color: var(--g-tinta);
    font-weight: 600;
}
.gab-item:hover .gab-acao--forte,
.gab-item:focus-within .gab-acao--forte { background: var(--g-marca); }
.gab-acao--icone { padding: .28rem .45rem; }
.gab-acao.is-confirmando {
    background: var(--g-erro) !important;
    border-color: var(--g-erro) !important;
    color: #fff !important;
    font-weight: 600;
}
.gab-item__acoes form { display: inline-flex; margin: 0; }

/* --- pastilhas de situação ------------------------------------------------ */

/* Estado, ao lado do título. Sem moldura: um ponto e uma palavra em mono. A
   cápsula colorida competia com o próprio título — e numa lista em que quase
   tudo está "pronto", vinte cápsulas verdes é ruído verde, não informação.
   O ponto continua redondo: é o único raio que sobra no sistema, porque um
   quadrado de 6px não lê como sinal de estado. */
.gab-pastilha {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-family: var(--gf-mono);
    font-size: .64rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
}
.gab-pastilha::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.gab-pastilha--ok      { color: var(--g-ok); }
.gab-pastilha--atencao { color: var(--g-atencao); }
.gab-pastilha--erro    { color: var(--g-erro); }
/* Cinza para "não configurado / nenhum" — ausência não é alerta. */
.gab-pastilha--neutra  { color: var(--g-tenue); }
.gab-pastilha--neutra::before { background: var(--g-linha); }

/* --- faixas (estado do acervo, avisos, configuração) ---------------------- */

.gab-faixa {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem .9rem;
    padding: .8rem 1rem;
    margin-bottom: 1.1rem;
    background: var(--g-pergaminho);
    border: 1px solid var(--g-linha);
}
.gab-faixa--atencao { border-color: #E0C79A; background: #FDF8EF; }
.gab-faixa__texto { flex: 1 1 22rem; font-size: .84rem; margin: 0; }
.gab-faixa__texto b { font-family: var(--gf-ui); }
.gab-faixa__texto small { display: block; color: var(--g-tenue); font-size: .78rem; margin-top: .15rem; }
.gab-faixa__acoes { display: flex; flex-wrap: wrap; gap: .5rem; margin-left: auto; }
.gab-faixa form { margin: 0; }

.gab-vazio {
    border: 1px dashed var(--g-linha);
    padding: 2rem 1.5rem;
    text-align: center;
    background: var(--g-papel);
}
.gab-vazio h2 { font-family: var(--gf-ui); font-size: 1rem; margin: 0 0 .35rem; }
.gab-vazio p { font-size: .85rem; color: var(--g-tenue); margin: 0 auto .8rem; max-width: 46ch; }
/* `:not(.gab-botao)` porque o estado vazio traz a ação primária DENTRO dele, e
   `.gab-vazio a` (0,2,0) sublinhava o texto do próprio botão. */
.gab-vazio a:not(.gab-botao) { text-decoration: underline; text-underline-offset: 2px; }

/* --- paginação ------------------------------------------------------------ */

.gab-paginas { display: flex; gap: .25rem; align-items: center; margin-top: 1rem; }
.gab-paginas a, .gab-paginas span {
    min-width: 1.9rem;
    padding: .25rem .5rem;
    text-align: center;
    border: 1px solid var(--g-linha);
    font-family: var(--gf-mono);
    font-size: .74rem;
    font-variant-numeric: tabular-nums;
    color: var(--g-tenue);
}
.gab-paginas a:hover { border-color: var(--g-tinta); color: var(--g-tinta); background: transparent; }
.gab-paginas .is-atual { background: var(--g-tinta); border-color: var(--g-tinta); color: var(--g-papel); font-weight: 600; }
.gab-paginas .is-vazio { border-color: transparent; }
/* A nota que fecha `/modelos` vem logo depois do navegador de páginas, e os
   .9rem dela colavam o texto nos botões — visto em navegador em 21/08/2026. */
.gab-paginas + .cfg-ponteiro { margin-top: 1.5rem; }

/* --- configuração dobrável (chave da OpenAI) ------------------------------ */

.gab-config { margin-top: 2rem; border-top: 1px solid var(--g-linha); padding-top: 1rem; }
.gab-config > summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--gf-ui);
    font-size: .84rem;
    font-weight: 600;
    list-style: none;
}
/* A nota dobrável — "por que isto existe", "o que não funciona numa skill". É o
   destino de todo parágrafo que saiu do fluxo das telas: a explicação continua
   disponível e deixa de ocupar a tela de quem já sabe. Compacta de propósito:
   ela é rodapé de uma linha, não uma seção. */
.gab-nota { margin: .35rem 0 0; }
.gab-nota > summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-family: var(--gf-mono);
    font-size: .68rem;
    color: var(--g-tenue);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.gab-nota > summary::-webkit-details-marker { display: none; }
.gab-nota > summary::before { content: "▸"; text-decoration: none; }
.gab-nota[open] > summary::before { content: "▾"; }
.gab-nota > summary:hover { color: var(--g-tinta); }
.gab-nota__corpo {
    margin-top: .45rem;
    padding: .7rem .85rem;
    background: var(--g-pergaminho);
    border-left: 2px solid var(--g-linha);
    font-size: .8rem;
    line-height: 1.55;
    color: var(--g-tenue);
    max-width: 68ch;
}
.gab .gab-nota__corpo p { font-size: .8rem; color: var(--g-tenue); margin: 0 0 .4rem; }
.gab .gab-nota__corpo p:last-child { margin-bottom: 0; }
.gab-config > summary::-webkit-details-marker { display: none; }
.gab-config > summary::before { content: "▸"; color: var(--g-tenue); }
.gab-config[open] > summary::before { content: "▾"; }
.gab-config__corpo { padding: .75rem 0 0 1.1rem; max-width: 44rem; }
.gab-config__corpo p { font-size: .82rem; color: var(--g-tenue); }
.gab-config__corpo a { text-decoration: underline; text-underline-offset: 2px; }

/* ⚠️ `--faixa`: a variante de quando a configuração mora NO MEIO da página, e
   ela nasceu de um defeito medido.

   Em 21/08/2026 a seção "Busca inteligente" saiu do FIM de `/modelos` para o
   topo — com 200 modelos, "no fim" significa inalcançável. O estilo veio junto,
   e o estilo era de rodapé: `margin-top: 2rem` mais `border-top` é o vocabulário
   de "acabou o conteúdo". Fechada, a seção virou uma linha MENOR e MAIS CLARA
   que o título do cartão logo abaixo — lia como legenda daquele cartão, não como
   controle. O **dono do app** procurou por uma hora e não a encontrou.

   A correção não é chamar atenção, é usar o vocabulário certo: o `<summary>`
   passa a ser uma FAIXA, o mesmo desenho de `.gab-faixa`, que nesta casa
   significa "há algo para fazer aqui". Sem sombra, sem canto arredondado, sem
   cor nova — só a moldura que separa controle de conteúdo.

   Aberta, o corpo continua a mesma caixa: a borda de cima do corpo some para as
   duas metades lerem como uma peça só. */
.gab-config--faixa { margin: 0 0 1.1rem; border-top: 0; padding-top: 0; }
.gab-config--faixa > summary {
    padding: .7rem 1rem;
    background: var(--g-pergaminho);
    border: 1px solid var(--g-linha);
}
.gab-config--faixa > summary:hover { border-color: var(--g-tinta); }
.gab-config--faixa[open] > summary { border-bottom-color: transparent; }
/* O rótulo de ação empurrado à direita: "ação com rótulo" do design system —
   pastilha diz o ESTADO, este diz o que acontece ao clicar. */
.gab-config__acao {
    margin-left: auto;
    font-family: var(--gf-mono);
    font-size: .66rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--g-tenue);
    font-weight: 400;
}
.gab-config--faixa > summary:hover .gab-config__acao { color: var(--g-tinta); }
.gab-config--faixa[open] .gab-config__acao { visibility: hidden; }
.gab-config--faixa .gab-config__corpo {
    padding: .9rem 1rem 1.1rem;
    border: 1px solid var(--g-linha);
    border-top: 0;
    background: var(--g-papel);
    /* ⚠️ A CAIXA vai até a borda da faixa, senão as duas metades não fecham e o
       desenho lê como dois retângulos empilhados. Quem ganha teto é a PROSA:
       linha longa demais é o que o `max-width` da regra base queria evitar. */
    max-width: none;
}
.gab-config--faixa .gab-config__corpo > p { max-width: 44rem; }
/* A linha simples de configuração: campo + botão lado a lado. */
.gab-config form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

/* ⚠️ **O COMPONENTE ganha do CONTEXTO — e não ganhava** (medido em navegador,
   27/08/2026). `.gab-config form` é (0,1,1) e `.gab-form` é (0,1,0): todo
   `.gab-form` dentro de um bloco de configuração perdia o `display: grid` para
   o `flex` da linha simples, e com ele perdia as DUAS colunas, o `gap` de
   `.85rem 1rem` e — o pior — o `grid-column: 1 / -1` do `.gab-form__largo`, que
   num container flex é inerte.

   O efeito na tela: o "Nova tarefa" do quadro com o CNJ e o título espremidos
   lado a lado, cortados no meio, e o prazo no lugar de quem mandava. Foi a
   captura do dono (*"os formulários estão ruins"*) — e a causa não estava no
   formulário, estava a cinquenta linhas dali, numa regra escrita para outro
   componente.

   `align-items: start` porque o `center` do contexto, num grid, empurraria cada
   campo para o meio da própria linha. */
.gab-config .gab-form {
    display: grid;
    gap: .85rem 1rem;
    align-items: start;
}
.gab .gab-config input[type="password"] {
    background: var(--g-papel) !important;
    color: var(--g-tinta) !important;
    border: 1px solid var(--g-linha) !important;
    border-radius: 7px !important;
    padding: .35rem .6rem !important;
    box-shadow: none !important;
    transform: none !important;
    font-family: var(--gf-mono) !important;
    font-size: .82rem !important;
    width: 22rem;
    max-width: 100%;
}
.gab .gab-config input[type="password"]:focus { border-color: var(--g-tinta) !important; box-shadow: none !important; }

/* --- painel de "Preparar": um item por vez, à vista de quem clicou --------

   As classes `nb-completar__*` são criadas por `modelos-completar.js` e ficaram
   com o nome antigo de propósito: renomeá-las seria mexer no JS para ganhar
   nada. O que muda aqui é o traje — no `minuta.css` elas viviam dentro de um
   callout amarelo chapado e usavam borda de 3px para se separar do fundo.

   ⚠️ O item concluído mostra A DESCRIÇÃO QUE A IA ESCREVEU. É o ponto do painel:
   quem clica quer saber se o resultado presta, e isso não se responde com
   percentual. */

.nb-completar__painel { margin-top: .5rem; }
.nb-completar__topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .5rem;
}
.nb-completar__contagem { font-family: var(--gf-ui); font-weight: 600; font-size: .86rem; }
.nb-completar__trilho {
    height: 4px;
    border-radius: 999px;
    background: rgba(20, 20, 15, .12);
    overflow: hidden;
    margin-bottom: .75rem;
}
.nb-completar__barra { height: 100%; width: 0; background: var(--g-tinta); transition: width .25s ease-out; }
.nb-completar__fila {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    max-height: 24rem;
    overflow-y: auto;
}
.nb-completar__item {
    border-bottom: 1px solid var(--g-linha);
    border-left: 3px solid transparent;
    padding: .5rem .65rem;
}
.nb-completar__item[data-estado="lendo"]  { border-left-color: var(--g-tinta); }
.nb-completar__item[data-estado="pronto"] { border-left-color: var(--g-ok); }
.nb-completar__item[data-estado="erro"]   { border-left-color: var(--g-erro); }
.nb-completar__linha { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.nb-completar__nome { font-family: var(--gf-ui); font-weight: 600; font-size: .84rem; min-width: 0; overflow-wrap: anywhere; }
.nb-completar__selo {
    flex: none;
    font-family: var(--gf-ui);
    font-size: .68rem;
    font-weight: 600;
    padding: .05rem .45rem;
    border-radius: 999px;
    border: 1px solid var(--g-linha);
    color: var(--g-tenue);
}
.nb-completar__item[data-estado="lendo"]  .nb-completar__selo { border-color: var(--g-tinta); color: var(--g-tinta); background: var(--g-marca); animation: nb-completar-pulso 1.1s ease-in-out infinite; }
.nb-completar__item[data-estado="pronto"] .nb-completar__selo { border-color: #A9D5BE; color: var(--g-ok); background: #F1F8F4; }
.nb-completar__item[data-estado="erro"]   .nb-completar__selo { border-color: #E8B4B6; color: var(--g-erro); background: #FDF1F1; }
@keyframes nb-completar-pulso { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* Serifa e medida curta: é texto para LER e julgar, não metadado para varrer. */
.nb-completar__texto {
    margin: .35rem 0 0;
    font-family: Tinos, "Times New Roman", Georgia, serif;
    font-size: .86rem;
    line-height: 1.45;
    color: var(--g-tinta);
    max-width: 62ch;
}
.nb-completar__item[data-estado="erro"] .nb-completar__texto {
    font-family: var(--gf-ui);
    font-size: .8rem;
    color: var(--g-erro);
}
.nb-completar__fim { margin: .75rem 0 0; font-size: .84rem; }
.nb-completar__recarregar { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
    .nb-completar__barra { transition: none; }
    .nb-completar__item[data-estado="lendo"] .nb-completar__selo { animation: none; }
}
@media (max-width: 720px) {
    .nb-completar__linha { flex-direction: column; align-items: flex-start; gap: .25rem; }
}

/* --- importação em lote: a esteira ---------------------------------------- */

.gab-etapas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: .75rem;
    margin-bottom: 1.1rem;
}
.gab-etapa { border: 1px solid var(--g-linha); border-radius: 9px; padding: .7rem .8rem; }
.gab-etapa__n {
    display: block;
    font-family: var(--gf-mono);
    font-size: .68rem;
    color: var(--g-tenue);
    margin-bottom: .15rem;
    font-variant-numeric: tabular-nums;
}
.gab-etapa__t { font-family: var(--gf-ui); font-weight: 600; font-size: .86rem; }
.gab-etapa__d { font-size: .78rem; color: var(--g-tenue); margin: .1rem 0 0; }
.gab-etapa.is-pulada { opacity: .55; }

.gab-solta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    border: 1.5px dashed rgba(20, 20, 15, .3);
    border-radius: 10px;
    padding: .9rem 1rem;
    background: var(--g-pergaminho);
    margin-bottom: 1.1rem;
    cursor: pointer;
}
.gab-solta:hover, .gab-solta.is-sobre { border-color: var(--g-tinta); background: #F7F1E1; }
.gab-solta__t { font-family: var(--gf-ui); font-weight: 600; font-size: .86rem; }
.gab-solta__d { font-size: .78rem; color: var(--g-tenue); margin: 0; }
.gab-solta__acao { margin-left: auto; }

.gab-opcao {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: .82rem;
    margin-bottom: 1rem;
    padding: .55rem .75rem;
    border: 1px solid var(--g-linha);
    border-radius: 8px;
}
.gab-opcao input { margin-top: .2rem; flex: none; }
.gab-opcao small { display: block; color: var(--g-tenue); font-size: .76rem; }

/* Aviso — amarelo cheio, SEM ícone e SEM borda (design system, 04). Serve para
   a regra que o usuário só descobriria errando, e o design system fixa o teto:
   **um por tela, no máximo**. Era pergaminho com moldura de 1px, indistinguível
   de qualquer outro bloco de apoio. */
.gab-aviso {
    padding: .8rem 1rem;
    font-size: .86rem;
    line-height: 1.55;
    color: var(--g-tinta-70);
    background: var(--g-aviso);
    margin-bottom: 1rem;
    max-width: 78ch;
}
.gab-aviso.is-erro { border-color: #E8B4B6; background: #FDF1F1; color: var(--g-erro); }

.gab-esteira__topo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem .9rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--g-linha);
}
.gab-esteira__contagem { font-family: var(--gf-ui); font-weight: 600; font-size: .9rem; }
.gab-esteira__resta { font-size: .78rem; color: var(--g-tenue); font-variant-numeric: tabular-nums; }
.gab-esteira__trilho {
    flex: 1 1 8rem;
    height: 4px;
    border-radius: 999px;
    background: rgba(20, 20, 15, .1);
    overflow: hidden;
}
.gab-esteira__barra { display: block; height: 100%; background: var(--g-tinta); width: 0; transition: width .35s ease; }

.gab-arq {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .15rem .9rem;
    padding: .65rem .2rem;
    border-bottom: 1px solid var(--g-linha);
}
.gab-arq.is-fora { opacity: .5; }
.gab-arq__nome {
    font-family: var(--gf-ui);
    font-size: .86rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: .45rem;
    min-width: 0;
}
.gab-arq__nome span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gab-arq__nome input { flex: none; }
.gab-arq__estado { justify-self: end; font-size: .76rem; color: var(--g-tenue); font-family: var(--gf-ui); }

.gab-trilha { grid-column: 1 / -1; display: flex; align-items: center; gap: .35rem; margin-top: .25rem; flex-wrap: wrap; }
.gab-passo { display: flex; align-items: center; gap: .3rem; font-size: .7rem; color: var(--g-tenue); font-family: var(--gf-ui); }
.gab-passo::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    border: 1.5px solid rgba(20, 20, 15, .25);
    background: transparent;
}
.gab-passo[data-e="fazendo"] { color: var(--g-tinta); font-weight: 600; }
.gab-passo[data-e="fazendo"]::before { border-color: var(--g-tinta); background: var(--g-marca); animation: gab-pulso 1.1s ease-in-out infinite; }
.gab-passo[data-e="feito"] { color: var(--g-tinta); }
.gab-passo[data-e="feito"]::before { background: var(--g-ok); border-color: var(--g-ok); }
.gab-passo[data-e="falhou"]::before { background: var(--g-erro); border-color: var(--g-erro); }
.gab-passo[data-e="pulado"] { text-decoration: line-through; }
.gab-passo__fio { width: 14px; height: 1px; background: var(--g-linha); }
@keyframes gab-pulso { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
@media (prefers-reduced-motion: reduce) {
    .gab-passo[data-e="fazendo"]::before { animation: none; }
    .gab-esteira__barra { transition: none; }
}

/* O que a IA escreveu, na serifa do documento: é a única resposta honesta para
   "será que funcionou?" — e ela não se lê numa barra de progresso. */
.gab-arq__descricao {
    grid-column: 1 / -1;
    margin: .35rem 0 0;
    font-family: Tinos, "Times New Roman", Georgia, serif;
    font-size: .86rem;
    line-height: 1.45;
    color: var(--g-tinta);
    max-width: 66ch;
}
.gab-arq__erro { grid-column: 1 / -1; margin: .3rem 0 0; font-size: .78rem; color: var(--g-erro); }
.gab-arq__ganho {
    grid-column: 1 / -1;
    margin: .25rem 0 0;
    font-size: .72rem;
    color: var(--g-tenue);
    font-family: var(--gf-mono);
    font-variant-numeric: tabular-nums;
}
.gab-arq__campos {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: .5rem .75rem;
    margin-top: .5rem;
    padding: .6rem .75rem;
    background: var(--g-pergaminho);
    border-radius: 8px;
}
.gab-campo { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.gab-campo > span { font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--g-tenue); font-family: var(--gf-ui); }
.gab-campo--largo { grid-column: 1 / -1; }
.gab .gab-arq__campos input[type="text"],
.gab .gab-arq__campos select {
    background: var(--g-papel) !important;
    color: var(--g-tinta) !important;
    border: 1px solid var(--g-linha) !important;
    border-radius: 6px !important;
    padding: .3rem .5rem !important;
    box-shadow: none !important;
    transform: none !important;
    font-family: var(--gf-ui) !important;
    font-size: .82rem !important;
    width: 100%;
}
.gab .gab-arq__campos input[type="text"]:focus,
.gab .gab-arq__campos select:focus { border-color: var(--g-tinta) !important; box-shadow: none !important; }

.gab-fim {
    margin-top: 1.1rem;
    padding: .9rem 1rem;
    border-radius: 10px;
    border: 1px solid var(--g-linha);
    background: var(--g-pergaminho);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
}
.gab-fim__t { font-family: var(--gf-ui); font-weight: 700; font-size: .95rem; }
.gab-fim__d { font-size: .8rem; color: var(--g-tenue); margin: .1rem 0 0; width: 100%; }
.gab-fim__acoes { margin-left: auto; display: flex; gap: .5rem; }

.gab-editor-oculto { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ==========================================================================
   O SISTEMA DE FOLHA — seção, linha, tira, cartão e abas

   Estas cinco peças são o que substituiu a coluna de cartões empilhados do
   painel e da configuração. O diagnóstico era o mesmo do neobrutalismo nas
   listas, um nível acima: cada assunto vinha dentro da sua própria moldura, com
   o próprio título, o próprio parágrafo de explicação e as próprias bordas —
   dez retângulos de peso idêntico, e a única forma de comparar dois deles era
   ler os dois inteiros.

   A folha desfaz isso com uma régua e um grid. A régua (`.gab-secao`) separa
   assuntos; o grid (`.gab-linha`) põe rótulo, valor e ação sempre nas mesmas
   três colunas, de modo que a segunda linha se lê pela POSIÇÃO do que já se
   aprendeu na primeira. É a gramática de tabela sem a tabela.

   ⚠️ NADA aqui tem `border-radius`. É o "em linhas retas" do pedido, e o único
   raio que sobrevive nas telas de trabalho é o ponto de 6px de estado.
   ========================================================================== */

/* --- seção: a régua e o número ------------------------------------------- */

.gab-secao { margin-bottom: 2.6rem; }
.gab-secao__cab {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .35rem .9rem;
    padding-bottom: .55rem;
    border-bottom: 1px solid var(--g-tinta);
    margin-bottom: .25rem;
}
/* ⚠️ A CAIXA ALTA é daqui, nunca do template. `test_configuracao_rotas.py` casa
   os textos `Acesso`, `Capacidades` e `Conta` no corpo da resposta: escrever
   `ACESSO` no HTML quebraria o teste sem mudar um pixel na tela. Mesma razão
   para o número vir de `data-n` — ele é enfeite de ordenação, não conteúdo. */
.gab-secao__cab h2 {
    margin: 0;
    font-family: var(--gf-mono);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--g-tinta);
    white-space: nowrap;
}
.gab-secao__cab h2::before {
    content: attr(data-n) " · ";
    color: var(--g-tenue);
    font-weight: 500;
}
.gab-secao__tag {
    font-family: var(--gf-mono);
    font-size: .62rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--g-tenue);
}
.gab-secao__tag--exigido { color: var(--g-erro); }
/* A frase de apoio da seção some antes de espremer o título: numa tela estreita
   ela viraria três linhas entre a régua e a primeira linha de conteúdo. */
.gab-secao__nota {
    margin-left: auto;
    font-size: .8rem;
    color: var(--g-tenue);
    min-width: 0;
}
@media (max-width: 900px) { .gab-secao__nota { display: none; } }

/* --- linha: rótulo · valor · ação ---------------------------------------- */

.gab-linha {
    display: grid;
    grid-template-columns: 12.5rem minmax(0, 1fr) auto;
    gap: .35rem 1.5rem;
    align-items: start;
    padding: 1.1rem .15rem;
    border-bottom: 1px solid var(--g-linha);
}
.gab-linha--centro { align-items: center; }
.gab-linha__rot { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.gab-linha__nome { font-weight: 600; font-size: .92rem; }
/* O estado, sob o nome, em mono caixa-alta. É ele que responde "isto está
   pronto?" sem que a pessoa precise interpretar o valor mascarado ao lado. */
.gab-linha__estado {
    font-family: var(--gf-mono);
    font-size: .62rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--g-tenue);
}
.gab-linha__estado--ok      { color: var(--g-ok); }
.gab-linha__estado--atencao { color: var(--g-atencao); }
.gab-linha__estado--falta   { color: var(--g-erro); }
.gab-linha__corpo { min-width: 0; display: flex; flex-direction: column; gap: .45rem; }
/* ⚠️ Linha SEM rótulo: o corpo é o primeiro filho e caía na coluna do rótulo —
   12,5rem —, com o resto da linha vazio ao lado. Medido em `/analises/<id>` a
   1440×900: a tarefa ocupava **200 px de uma linha de 1064**, quebrada em três
   linhas, e 811 px sobravam à direita. Atinge também a mensagem de erro da
   mesma tela e os dois estados vazios de `/uso`.
   Vai para a coluna do VALOR, e não para a margem: a gramática da folha é ler
   pela POSIÇÃO, então a prosa tem de alinhar com os valores das linhas
   vizinhas — na tela concluída, a tarefa fica na mesma vertical do link
   público logo abaixo. No breakpoint a linha vira uma coluna só e a regra é
   desfeita, senão `grid-column: 2` inventaria uma segunda coluna implícita. */
.gab-linha__corpo:first-child { grid-column: 2; }
.gab .gab-linha__corpo p { font-size: .84rem; color: var(--g-tenue); margin: 0; line-height: 1.5; }
/* O valor guardado — CPF mascarado, hash da chave, URL. Sempre mono: é o que a
   pessoa veio conferir, e o mono é o que deixa `····4or0` legível. */
.gab-linha__valor {
    font-family: var(--gf-mono);
    font-size: .78rem;
    color: var(--g-tinta);
    word-break: break-all;
}
.gab-linha__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; justify-content: flex-end; }
.gab-linha__acoes form { margin: 0; display: inline-flex; }
/* Descrição de uma linha para os itens de Conta, onde não há valor a mostrar. */
.gab-linha__dica { font-size: .78rem; color: var(--g-tenue); }
.gab-linha--vazia .gab-linha__corpo { color: var(--g-tenue); }

/* --- tira de status ------------------------------------------------------ */

/* Quatro (ou três) células com o estado de cada coisa que a tela governa. O
   fundo escuro entre elas é o próprio `gap`, o que dá o fio de 1px sem uma
   borda por célula. */
.gab-tira {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1px;
    background: var(--g-linha);
    border: 1px solid var(--g-linha);
    margin-bottom: 2.2rem;
}
.gab .gab-tira__c {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: .85rem 1rem;
    background: var(--g-papel);
    color: var(--g-tinta);
}
.gab a.gab-tira__c:hover { background: var(--g-pergaminho); }
.gab-tira__rot {
    font-family: var(--gf-mono);
    font-size: .62rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--g-tenue);
}
.gab-tira__v { display: flex; align-items: center; gap: .45rem; font-weight: 500; font-size: .88rem; }
.gab-tira__v::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--g-linha);
    flex: none;
}
.gab-tira__c.is-ok    .gab-tira__v::before { background: var(--g-ok); }
.gab-tira__c.is-falta .gab-tira__v::before { background: var(--g-marca); }
.gab-tira__c.is-falta .gab-tira__v { color: var(--g-tinta); }
.gab-tira__c:not(.is-ok):not(.is-falta) .gab-tira__v { color: var(--g-tenue); }
.gab-tira__d { font-family: var(--gf-mono); font-size: .68rem; color: var(--g-tenue); }

/* --- cartão: conector, skill --------------------------------------------- */

.gab-cartao { border: 1px solid var(--g-linha); background: var(--g-papel); }
.gab-cartao + .gab-cartao { margin-top: .6rem; }
.gab-cartao.is-desligado { opacity: .62; }
.gab-cartao__cab {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .7rem;
    padding: .7rem .85rem;
    border-bottom: 1px solid var(--g-linha);
}
.gab-cartao__nome { font-weight: 600; font-size: .88rem; }
/* O prefixo que o conector dá às ferramentas (`buscaweb_*`) — é identificador,
   e o chip mono é como ele aparece no chat. */
.gab-cartao__slug {
    font-family: var(--gf-mono);
    font-size: .68rem;
    background: var(--g-pergaminho);
    border: 1px solid var(--g-linha);
    color: var(--g-tenue);
    padding: .1rem .4rem;
}
.gab-cartao__acoes { margin-left: auto; display: flex; flex-wrap: wrap; gap: .35rem; }
.gab-cartao__acoes form { margin: 0; display: inline-flex; }
.gab-cartao__corpo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .9rem;
    padding: .6rem .85rem;
    font-family: var(--gf-mono);
    font-size: .7rem;
    color: var(--g-tenue);
}
.gab-cartao__url {
    max-width: 30rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gab-cartao__corpo .is-erro { color: var(--g-erro); }

/* Botão de abrir o cadastro. Tracejado porque é a moldura de algo que ainda não
   existe — a mesma convenção do `.gab-vazio`. */
.gab .gab-abrir {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .6rem;
    padding: .6rem .95rem;
    border: 1px dashed var(--g-tenue);
    background: transparent;
    color: var(--g-tinta);
    font-family: var(--gf-ui);
    font-size: .84rem;
    cursor: pointer;
}
.gab .gab-abrir:hover { border-style: solid; border-color: var(--g-tinta); background: var(--g-pergaminho); }

/* --- abas exclusivas (colar JSON | à mão) --------------------------------- */

/* ⚠️ Radio + `:checked ~`, e não JavaScript. Os dois modos de cadastrar um
   conector viviam empilhados na mesma tela, separados por um `<hr>` e um
   "…ou preencha à mão" — quem chegava lia os dois para descobrir que precisava
   de um. Aba resolve, mas só vale se funcionar com JS desligado, que é
   requisito desta casa (o formulário é o caminho acessível).

   O `<input>` fica visualmente escondido e NÃO usa `display:none`: assim ele
   continua focável pelo teclado e o `:focus-visible` do rótulo desenha o anel. */
.gab-abas { display: flex; margin-bottom: -1px; }
.gab .gab-abas label {
    display: inline-flex;
    align-items: center;
    padding: .45rem .9rem;
    border: 1px solid var(--g-tinta);
    background: transparent;
    color: var(--g-tinta);
    font-family: var(--gf-mono) !important;
    font-size: .66rem !important;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
}
.gab .gab-abas label + label { border-left: 0; }
/* ⚠️ Os radios moram no CONTAINER, não dentro do `.gab-abas`: os painéis
   precisam ser irmãos POSTERIORES deles para o combinador `~` alcançá-los, e as
   `<label for>` funcionam à distância. Ficam também fora dos `<form>`, senão
   iriam no POST como um campo `cfgModo` que a rota não conhece.

   ⚠️ E o par é casado por CLASSE (`is-aba-a`/`is-aba-b`), nunca por
   `:nth-of-type`. Aquele conta por TIPO DE ELEMENTO entre os irmãos: com um
   `<div class="gab-abas">` no meio, `.gab-aba-painel:nth-of-type(1)` não casa
   nada — o primeiro `div` é a barra de abas. O sintoma seria os dois painéis
   invisíveis, e nada no CSS explicando por quê. */
.gab-abas-caixa > .gab-aba-painel { display: none; }
.gab-abas-caixa > input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px; height: 1px;
    margin: 0;
}
.gab-abas-caixa > input.is-aba-a:checked ~ .gab-aba-painel.is-aba-a,
.gab-abas-caixa > input.is-aba-b:checked ~ .gab-aba-painel.is-aba-b { display: block; }
.gab-abas-caixa > input.is-aba-a:checked ~ .gab-abas label[for$="-a"],
.gab-abas-caixa > input.is-aba-b:checked ~ .gab-abas label[for$="-b"] {
    background: var(--g-tinta);
    color: var(--g-papel) !important;
}
.gab-abas-caixa > input:focus-visible ~ .gab-abas label { outline: 1px dotted var(--g-tinta); }
.gab-aba-painel { padding-top: .9rem; }

/* --- formulário dentro de linha/cartão ------------------------------------ */

/* ⚠️ Regra 2 do cabeçalho: `custom.css` estiliza os campos com `!important`, e
   `input[type="text"]` é (0,1,1). Para valer aqui são precisas as DUAS coisas —
   o `!important` e a especificidade de `.gab .gab-form <campo>` (0,2,1).
   Faltando uma, o campo sai com a caixa preta de 3px e a sombra dura, e nada no
   console diz por quê. */
.gab-form { display: grid; gap: .85rem 1rem; max-width: 42rem; }
.gab-form--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gab-form__largo { grid-column: 1 / -1; }
/* ⚠️ Campo CURTO (data, número): ocupa a célula do grid mas não estica até o
   fim dela. Sem isto, o `<input type="date">` — o campo mais estreito do
   formulário — recebia meia linha inteira, empurrando o CNJ e o título, que
   são os dois que precisam de largura, para o corte. */
.gab-form__curto { max-width: 12rem; }
.gab .gab-form label {
    display: block;
    font-family: var(--gf-mono) !important;
    font-size: .62rem !important;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--g-tenue) !important;
    margin-bottom: .3rem;
}
/* ⚠️ **A lista de tipos é a lista inteira, e faltavam cinco** (27/08/2026).
   O seletor é por `input[type=…]` porque é isso que vence o `custom.css`, e o
   preço dessa escolha é que todo tipo ausente cai FORA do design system: o
   `<input type="date">` do quadro de tarefas e o `<input type="email">` da
   Configuração saíam com a caixa preta de 3 px, a sombra dura e o pulo no foco
   do tema antigo — e, pior, sem o `width: 100%` das outras, de modo que o
   rótulo e o campo ficavam LADO A LADO numa tela onde todos os outros têm o
   rótulo em cima. Era o formulário desalinhado da captura do dono. */
.gab .gab-form input[type="text"],
.gab .gab-form input[type="url"],
.gab .gab-form input[type="password"],
.gab .gab-form input[type="file"],
.gab .gab-form input[type="date"],
.gab .gab-form input[type="email"],
.gab .gab-form input[type="tel"],
.gab .gab-form input[type="number"],
.gab .gab-form input[type="search"],
.gab .gab-form textarea,
.gab .gab-form select {
    width: 100%;
    background: var(--g-papel) !important;
    color: var(--g-tinta) !important;
    border: 1px solid var(--g-linha) !important;
    border-radius: 0 !important;
    padding: .5rem .65rem !important;
    box-shadow: none !important;
    transform: none !important;
    font-family: var(--gf-ui) !important;
    font-size: .84rem !important;
}
/* ⚠️ O `select` divide o padding com input e textarea, mas só ele desenha a
   SETA no canto direito — e ela fica POR CIMA do texto, não ao lado. Medido em
   `/analises` a 1440×900: o campo Modelo tem 162 px, "Meu modelo padrão" mede
   125 px e sobravam 14 px de folga para uma seta de ~20; a opção chegava à tela
   como "Meu modelo padrã". */
.gab .gab-form select { padding-right: 1.75rem !important; }
.gab .gab-form input[type="password"],
.gab .gab-form textarea { font-family: var(--gf-mono) !important; font-size: .8rem !important; }
.gab .gab-form textarea { line-height: 1.6; resize: vertical; }
.gab .gab-form input:focus,
.gab .gab-form textarea:focus,
.gab .gab-form select:focus { border-color: var(--g-tinta) !important; box-shadow: none !important; }
.gab-form__dica { font-size: .74rem; color: var(--g-tenue); margin: .3rem 0 0; line-height: 1.5; }
.gab .gab-form__dica a { text-decoration: underline; text-underline-offset: 2px; }
.gab-form__pe {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .9rem;
    padding-top: .2rem;
}
.gab-form__pe small { color: var(--g-tenue); font-size: .74rem; margin-left: auto; max-width: 40ch; }

/* --- responsivo ----------------------------------------------------------- */

@media (max-width: 860px) {
    .gab { grid-template-columns: 1fr; }
    .gab-lateral {
        position: static;
        max-height: none;
        flex-direction: row;
        align-items: center;
        gap: .4rem .5rem;
        border-right: 0;
        border-bottom: 1px solid var(--g-linha);
        padding: .6rem .75rem;
    }
    .gab-lateral .gab-grupo { flex-direction: row; gap: .2rem; }
    .gab-lateral .gab-grupo--recentes, .gab-lateral__pe, .gab-rotulo { display: none; }

    /* ⚠️ **UMA linha que rola, e a medição de antes tinha envelhecido.**
       O comentário aqui dizia "dez destinos ocupam três linhas em 390px"; medido
       em 01/09/2026 são **cinco linhas e ~160px** — a lista cresceu com os
       destinos que entraram depois, e ninguém remediu. Somados ao cabeçalho da
       tela, o quadro de tarefas abria em `y=869` numa tela de 844: **nenhum
       cartão antes de rolar**.

       Quebrar em linhas é o que faz a barra crescer sem teto a cada destino
       novo. Rolando na horizontal ela custa uma linha para sempre, e o que não
       cabe continua alcançável — o padrão de barra de abas de celular. O
       `scrollbar-width: none` tira a barra cinza que o Android desenha por
       cima do primeiro item; quem diz que há mais é o item cortado na borda. */
    .gab-lateral, .gab-lateral .gab-grupo {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .gab-lateral::-webkit-scrollbar, .gab-lateral .gab-grupo::-webkit-scrollbar {
        display: none;
    }
    /* Sem isto o flex encolhe cada item até o rótulo quebrar no meio da palavra,
       em vez de deixar a fila passar da borda. */
    .gab-lateral .gab-grupo, .gab .gab-nav, .gab .gab-novo { flex: none; }
    .gab .gab-nav { padding: .3rem .45rem; font-size: .8rem; gap: .35rem; }
    .gab-nav i { font-size: .82rem; }
    .gab .gab-novo { padding: .4rem .7rem; }
    .gab-topo { padding: 1rem 1rem .8rem; }
    .gab-topo h1 { font-size: 1.35rem; }
    .gab-conteudo { padding-left: 1rem; padding-right: 1rem; }
    .gab-arq__campos { grid-template-columns: 1fr; }
    .gab-item { grid-template-columns: minmax(0, 1fr); }
    .gab-item__acoes { margin-top: .35rem; }

    /* A linha desmonta em bloco: com 12,5rem de rótulo fixo sobra menos de
       metade da tela para o valor, e um CPF mascarado quebra em três. */
    .gab-linha { grid-template-columns: 1fr; gap: .5rem; padding: .95rem .15rem; }
    /* Com uma coluna só não há coluna de valor para onde mandar o corpo — ver a
       regra de `:first-child` lá em cima. */
    .gab-linha__corpo:first-child { grid-column: auto; }
    .gab-linha__acoes { justify-content: flex-start; }
    .gab-form--2 { grid-template-columns: 1fr; }
    .gab-form__pe small { margin-left: 0; }
    .gab-cartao__url { max-width: 100%; }
}