/* ==========================================================================
   COMPONENTE — uc-botao
   O controle de acao do sistema. Absorve tres coisas que ate hoje estavam
   escritas em tres lugares: o `.uc-btn` do tema antigo (16 elementos nas 10
   telas medidas), o `.uc-rotulo__acao` (tarefa A2) e o `.uc-chips__acao`
   (tarefa C). A duplicacao entre os dois ultimos foi criada pela ORDEM das
   tarefas e esta declarada no relatorio da tarefa C, secao 13. Aqui ela morre.

   ==========================================================================
   1. O ELEMENTO: 15 LINKS E 3 BOTOES DE VERDADE — medido, nao suposto
   ==========================================================================
   Varredura das 10 telas renderizadas (04-05/09/2026) e dos 19 pontos do
   `themes/universo-concursos` que escrevem `uc-btn`:

     <a>       15 dos 16 elementos entregues   -> navega
     <button>   1 dos 16 elementos entregues   -> `taxonomy.php:216`,
                type="submit" name="uc_banco_start" value="20",
                "Resolver 20 questoes agora"

   No CODIGO existem TRES `<button>`, e os outros dois so' nao apareceram na
   varredura porque vivem atras de um POST:

     inc/banco.php:669      <button type="submit">Comecar a revisao</button>
     inc/resolver.php:457   <button name="uc_finish" value="1">Finalizar e
                            ver o resultado</button>
     taxonomy.php:216       <button type="submit" name="uc_banco_start">

   Os tres sao ENVIO DE FORMULARIO -- acao sem navegacao. Sao exatamente o
   caso que o briefing manda separar, e ja estao certos no tema antigo: quem
   escreveu aquilo nao errou o elemento, errou so' o CSS (o `.uc-btn` base
   pinta os dois iguais e nunca declarou o estado "enviado, aguardando").

   CONTRATO, entao, e' do ELEMENTO e nao de uma classe modificadora:
     <a class="uc-botao" href="...">        vai para outro lugar
     <button class="uc-botao" type="...">   faz alguma coisa aqui
   Nao existe `.uc-botao--link`: o elemento ja diz. Classe que repete o que a
   tag afirma e' uma segunda fonte da verdade que pode divergir -- o mesmo
   raciocinio que fez o chip usar `[aria-current]` em vez de um
   `data-uc-estado="ativo"` paralelo.

   ==========================================================================
   2. A SETA: SVG, NAO O CARACTERE `→`
   ==========================================================================
   O tema antigo escreve a seta como TEXTO dentro do rotulo: `Comecar a
   resolver →` (capa), `Resolver esta prova online &rarr;` (prova),
   `← Anterior` / `Proxima →` (resolver), `Comecar a resolver &rarr;`
   (rodape, em 10 de 10 telas). Aqui ela vira SVG monoline com
   `aria-hidden="true"`. Quatro motivos, os tres primeiros MEDIDOS:

   1. LEITOR DE TELA. O caractere e' conteudo: entra no nome acessivel do
      link. "Comecar a resolver, seta para a direita" e' ruido, e ele se
      repete em toda tela -- o rodape sozinho poe um em cada uma das 10.
      SVG com aria-hidden e' silencio garantido, sem depender do nivel de
      verbosidade de pontuacao que cada leitor de tela traz de fabrica.
   2. QUEBRA DE LINHA. Sendo texto, a seta e' uma palavra: em palco estreito
      ela desce sozinha para a linha de baixo e o botao fica com "Comecar a
      resolver" em cima e "→" embaixo. Dentro de um `inline-flex` SEM
      `flex-wrap`, o SVG NAO PODE ser orfanado -- o item nao quebra.
   3. ⛔ A FONTE NAO TEM O GLIFO. Isto foi MEDIDO em 05/09/2026, no navegador,
      e nao suposto. `document.fonts.check()` respondeu `true` para tudo --
      inclusive para a seta -- e a largura veio 200 em todas as familias: um
      resultado identico em toda parte acusa o instrumento, nao o objeto.
      O instrumento certo tem CONTROLE: desenhar o caractere em canvas com
      `'Public Sans'` e com uma familia que NAO EXISTE, e comparar os dois
      bitmaps. Se o glifo existe na fonte, os bitmaps diferem; se falta, os
      dois caem no mesmo recurso final e ficam identicos.

        A   Public Sans x fallback   bitmaps DIFERENTES   142 x 144,43 px
        c-cedilha                    bitmaps DIFERENTES   108,7 x 88,77 px
        0   IBM Plex Mono            bitmaps DIFERENTES
        ->  U+2192, Public Sans      bitmaps IDENTICOS    200 x 200 px
        <-  U+2190, Public Sans      bitmaps IDENTICOS    200 x 200 px
        ->  U+2192, IBM Plex Mono    bitmaps IDENTICOS

      Os tres controles positivos separam; as tres setas nao. `PublicSans-400
      .woff2` (26 KB) e `IBMPlexMono-400.woff2` sao SUBCONJUNTOS e nao trazem
      U+2192/U+2190.
      CONSEQUENCIA, e ela e' sobre o site de hoje: a seta de "Comecar a
      resolver ->" que sai em 10 de 10 telas ja NAO esta sendo desenhada pela
      fonte do tema -- e' uma fonte de sistema, com outro peso, outra altura-x
      e outra cor optica, colada no fim do rotulo. Defeito real, invisivel a
      quem nao mede, e que nenhum ajuste de CSS conserta enquanto a seta for
      um caractere.
   4. VOCABULARIO. A tarefa C ja fixou o idioma de icone deste sistema: SVG
      monoline, traco 1,8px, `currentColor`, `aria-hidden`. Uma seta
      tipografica ao lado de um chip com icone desenhado seriam dois
      vocabularios de icone na mesma tela -- e estes dois componentes
      aparecem juntos em toda tela.

   A regra do craft proibe EMOJI como icone; a seta tipografica nao e' emoji.
   Mas o motivo da proibicao -- glifo de uma fonte que voce nao controla,
   cuja renderizacao voce nao governa -- vale igual aqui.

   ==========================================================================
   3. ESTADO: OS ATRIBUTOS DA PLATAFORMA, NAO UM `data-uc-estado` PARALELO
   ==========================================================================
   O botao NAO tem `data-uc-estado`. Ele usa o que a plataforma ja define e o
   leitor de tela ja le:

     [aria-disabled="true"] / [disabled]   nao da' para usar agora
     [aria-busy="true"]                    enviado, esperando resposta

   Motivo, o mesmo da tarefa C: estilo que sai do proprio atributo de
   acessibilidade NAO CONSEGUE MENTIR sobre ele. Um `data-uc-estado="erro"`
   em paralelo poderia dizer uma coisa enquanto o `aria-*` diz outra, e a que
   vale para quem depende do anuncio e' a segunda.

   POR QUE `aria-disabled` E NAO `disabled`, na acao principal de um
   formulario: `disabled` TIRA o botao da ordem de tabulacao. Quem navega por
   teclado deixa de encontra-lo -- e com ele deixa de encontrar o MOTIVO
   escrito ao lado, que e' a unica coisa que explica por que nao da' para
   seguir. `aria-disabled="true"` mantem o foco alcancavel, anuncia
   "indisponivel" e deixa a pessoa ler o porque. As duas formas sao pintadas
   igual aqui de proposito, para que um `disabled` cru nunca pareca ativo.

   ==========================================================================
   4. O QUE ESTE ARQUIVO NAO FAZ
   ==========================================================================
   Nao ha `.uc-botao--perigo` nem `--sucesso`: nenhuma das 10 telas tem acao
   destrutiva, e variante sem uso e' o que o `rotulo.css` desta mesma fase
   acabou de pagar para tirar. Quando aparecer, entra com o uso medido junto.
   ========================================================================== */

.uc-botao{
  /* inline-flex, e nao inline-block: e' ele que impede a seta de descer
     sozinha para a linha de baixo (item 2 do cabecalho). Sem flex-wrap de
     proposito -- o rotulo quebra dentro do proprio texto, o icone nunca
     e' orfanado. */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  /* 8px entre rotulo e icone: sao UMA coisa (o mesmo comando), nao duas. */
  gap:var(--sp-2);
  /* Item de flex/grade herda min-width:auto -- e' o que faz um rotulo de uma
     palavra so' estourar a coluna em vez de quebrar dentro dela. Mesmo
     defeito que o `chip.css` e o `rotulo.css` desta fase ja pagaram. */
  min-width:0;
  /* ⛔ MEDIDO NO NAVEGADOR em 05/09/2026, no exemplar de borda: com o rotulo
     "Superintendenciadedesenvolvimentodonordeste" (43 caracteres, ZERO
     espaco) o botao media scrollWidth 309 contra clientWidth 288 -- 21px de
     texto CORTADOS pelo overflow:hidden abaixo, invisiveis e sem aviso.
     `overflow-wrap:break-word`, que a 01-base.css poe no body, NAO resolve:
     ele quebra a palavra na LINHA mas nao reduz o MIN-CONTENT do item de
     flex, entao o item nunca encolhe. `anywhere` reduz. E' o mesmo defeito e
     o mesmo conserto que o `chip.css` ja tinha pago -- aqui ele voltou porque
     o botao tambem e' um container de flex com texto dentro.
     Este e' o defeito que so' o estado de BORDA pega, e e' por isso que ele
     fica ao lado dos outros quatro em vez de escondido. */
  overflow-wrap:anywhere;
  /* Um botao que vire item de grade ou de flex esticaria ate a largura da
     celula (justify-self:stretch e' o padrao) -- e ai TODO botao pareceria
     --bloco, inclusive no mostruario, que e' onde se julga a forma. A largura
     natural e' propriedade do CONTROLE; ocupar a linha inteira e' a opcao
     explicita da variante --bloco, que devolve o stretch. */
  justify-self:start;
  /* A barra de espera (secao "aguardando") e' um ::after posicionado; sem
     este `relative` ela se ancora no primeiro ancestral posicionado, que
     pode ser a pagina inteira. `overflow:hidden` a mantem dentro do raio.
     O anel de foco NAO e' cortado por isto -- outline do proprio elemento
     nao e' recortado pelo overflow dele. */
  position:relative;
  overflow:hidden;
  padding:var(--sp-3) var(--sp-4);
  /* Borda transparente na base: as variantes so' trocam a COR, entao a
     largura do controle nao muda de uma para a outra. Sem isto, o botao de
     texto e o de contorno teriam 3px de diferenca de altura lado a lado. */
  border:var(--uc-borda) solid transparent;
  border-radius:var(--uc-r-2);
  background:none;
  color:var(--uc-ink);
  font-family:var(--uc-sans);
  font-size:var(--uc-s--1);
  font-weight:var(--uc-w-realce);
  line-height:var(--uc-lh-controle);
  text-align:center;
  /* Botao nao e' link de texto: nunca sublinhado. A 01-base.css nao sublinha
     <a>, mas o navegador sublinha, e a variante --texto (que E' sublinhada)
     precisa que a base esteja limpa para ligar o sublinhado de proposito. */
  text-decoration:none;
  cursor:pointer;
  transition:background-color var(--uc-dur-2) var(--uc-ease),
             border-color var(--uc-dur-2) var(--uc-ease),
             color var(--uc-dur-2) var(--uc-ease),
             box-shadow var(--uc-dur-1) var(--uc-ease),
             transform var(--uc-dur-1) var(--uc-ease);
}

/* --------------------------------------------------------------------------
   VARIANTE: FORTE (a acao principal)
   -------------------------------------------------------------------------- */

/* A SOMBRA TATIL de 3px e' o unico lugar do sistema que a recebe -- esta
   escrito no 00-tokens.css ("--uc-tatil: so no botao principal. Espalhar
   isso e' o que vira brinquedo"). Este componente e' o primeiro a consumi-la:
   ate agora ela era um token declarado e nunca usado.
   Ela nao e' enfeite: e' o segundo sinal, nao-cromatico, de "este e' o
   comando principal desta tela". Quem nao distingue navy de cinza continua
   vendo que UM dos botoes tem relevo e os outros nao. */
.uc-botao--forte{
  padding-inline:var(--sp-5);
  border-color:var(--uc-acao);
  background:var(--uc-acao);
  color:var(--uc-acao-ink);
  box-shadow:0 var(--uc-tatil) 0 0 var(--uc-acao-forte);
}
.uc-botao--forte:hover{
  border-color:var(--uc-acao-forte);
  background:var(--uc-acao-forte);
}

/* --------------------------------------------------------------------------
   VARIANTE: CHROME (a acao principal QUANDO ELA VIVE SOBRE A BARRA ESCURA)
   -------------------------------------------------------------------------- */

/* ⛔ POR QUE ELA EXISTE, E POR QUE MORA AQUI E NAO EM `topo.css`
   (tarefa G1, 05/09/2026)

   `--uc-acao` (#16365C) sobre `--uc-chrome-bg` (#0D2B4E) da 1,17:1 -- o
   00-tokens.css ja mede isso ao explicar por que `--uc-foco-chrome` existe. Um
   `uc-botao--forte` dentro da barra do topo seria navy sobre navy: um botao
   invisivel. O :root ja traz o par certo para essa superficie
   (`--uc-chrome-cta`, 4,68:1 com texto branco, e o hover MAIS ESCURO com o
   motivo escrito la').

   ⚠️ O ARQUIVO NAO E' DETALHE, E' A REGRA. A tentacao era escrever
   `.uc-topo .uc-botao{background:var(--uc-chrome-cta)}` dentro de `topo.css`
   -- que e' literalmente o `.uc-portas .uc-card2__pe` de bancada.css:859, e e'
   o que a R16 passou a acusar nesta mesma tarefa. A saida CERTA e' esta: o
   convidado declara a propria variante, no proprio arquivo. Escrever
   `.uc-botao--chrome{...}` dentro de `topo.css` tambem nao vale -- seria DONO
   DIVIDIDO, a segunda forma de falha da R16.

   SEM A SOMBRA TATIL, e a ausencia e' escolhida: os 3px de `--uc-tatil` sao a
   marca do comando principal DA PAGINA. Dentro de uma barra de 56px eles nao
   leem como relevo, leem como desalinhamento -- a barra inteira ja e' uma
   superficie levantada, e um degrau dentro de outro degrau nao soma. */
.uc-botao--chrome{
  padding-inline:var(--sp-5);
  border-color:var(--uc-chrome-cta);
  background:var(--uc-chrome-cta);
  color:var(--uc-chrome-ink);
}
.uc-botao--chrome:hover{
  border-color:var(--uc-chrome-cta-hover);
  background:var(--uc-chrome-cta-hover);
}

/* --------------------------------------------------------------------------
   VARIANTE: CONTORNO (a acao secundaria)
   -------------------------------------------------------------------------- */

/* Chamava-se `--ghost` no tema antigo. Renomeado agora, e nao depois, porque
   agora custa zero: nenhum template consome este arquivo ainda. Na Fase 4
   custaria 45 pontos de marcacao. O sistema inteiro nomeia em portugues
   (--forte, --zero, --mais, --osso, uc-mostruario); um `--ghost` no meio
   seria a mesma erosao de vocabulario que produziu uc-sec/uc-sec2. */
.uc-botao--contorno{
  border-color:var(--uc-rule-forte);
  background:var(--uc-field);
  color:var(--uc-ink);
}
.uc-botao--contorno:hover{
  border-color:var(--uc-ink-3);
  background:var(--uc-paper-2);
}

/* --------------------------------------------------------------------------
   VARIANTE: TEXTO (a acao de recuperacao)
   -------------------------------------------------------------------------- */

/* Esta e' a forma que o `.uc-chips__acao` tinha, e o motivo dela continua o
   mesmo, agora escrito num lugar so': painel que JA TEM moldura nao pede uma
   segunda moldura dentro. Serve ao <a> ("ver todas") e ao <button> ("tentar
   de novo") com a mesma regra -- a diferenca entre os dois e' de ELEMENTO,
   nao de forma. */
.uc-botao--texto{
  /* ⛔ MEDIDO em 05/09/2026, com o mouse (1521px): com `padding:0` este botao
     media 122 x 17 px. 17 esta ABAIXO do piso legal de 24x24 da WCAG 2.5.8
     (AA) -- e o `.uc-chips__acao` que ele substitui tinha a mesma altura: a
     tarefa C mediu 44px no DEDO e nao mediu o alvo no MOUSE, entao o defeito
     passou.
     Ele passaria pela EXCECAO DE ESPACAMENTO (nao ha outro alvo dentro de
     24px em volta), mas depender da excecao e' depender do hospedeiro nunca
     encostar outro controle ali. 4px em cima e embaixo (--sp-1, na grade)
     levam a caixa a 25px sem mover o texto nem o sublinhado, e sem recuo
     horizontal: ele continua encostando na margem como um link de texto deve.
     No dedo o min-height de 44px do fim deste arquivo continua mandando. */
  padding:var(--sp-1) 0;
  border-color:transparent;
  background:none;
  color:var(--uc-acao);
  text-decoration:underline;
  text-underline-offset:var(--uc-sublinhado-recuo);
}
.uc-botao--texto:hover{
  color:var(--uc-ink);
}

/* --------------------------------------------------------------------------
   VARIANTE: BLOCO (ocupa a largura toda)
   -------------------------------------------------------------------------- */

/* Chamava-se `--full`. Mesmo motivo do `--contorno` acima.
   Combina com qualquer uma das tres anteriores -- e' eixo de LARGURA, nao de
   severidade, e por isso nao concorre com elas. */
.uc-botao--bloco{
  display:flex;
  width:100%;
  /* Devolve o que a base tirou: aqui ocupar a linha inteira e' o pedido. */
  justify-self:stretch;
}

/* --------------------------------------------------------------------------
   INTERACAO: PRESSIONADO
   -------------------------------------------------------------------------- */

/* --uc-pressao (1px) e' o deslocamento de TODO controle deste sistema; o chip
   ja o usa. No botao forte a sombra encolhe na mesma medida em que o botao
   desce, entao a BORDA DE BAIXO do conjunto fica parada: o botao afunda
   dentro da propria sombra em vez de o bloco inteiro pular 1px. */
.uc-botao:active:not([aria-disabled="true"]):not([disabled]){
  transform:translateY(var(--uc-pressao));
}
.uc-botao--forte:active:not([aria-disabled="true"]):not([disabled]){
  box-shadow:0 calc(var(--uc-tatil) - var(--uc-pressao)) 0 0 var(--uc-acao-forte);
}

/* --------------------------------------------------------------------------
   ESTADO: NAO DA' PARA USAR AGORA
   -------------------------------------------------------------------------- */

/* `:not([aria-busy="true"])` nos dois seletores: um botao que esta ESPERANDO
   resposta tambem carrega aria-disabled (para travar o reenvio, que e' o que
   o craft manda), mas ele nao e' um botao desligado -- ele e' o comando
   principal, trabalhando. Sem este :not() ele ficaria cinza no exato momento
   em que precisa continuar dizendo "estou cuidando disso".

   CONTRASTE MEDIDO: --uc-desabilitado-ink (=--uc-ink-3, #616C7A) sobre
   --uc-paper-3 (#E3E7EC) da 4,30:1 -- ABAIXO do piso de 4,5:1 de texto
   pequeno. Fica assim, e o numero esta escrito aqui em vez de escondido:
   (a) a WCAG 1.4.3 isenta controle desabilitado do piso de contraste;
   (b) o par vem do :root (--uc-desabilitado-ink x --uc-paper-3), entao
       trocar aqui criaria um segundo vocabulario de "desligado" -- se for
       para mudar, e' decisao de fundacao, nao remendo dentro de um
       componente;
   (c) COR NAO E' O UNICO SINAL, e aqui ela e' o quarto de quatro: some a
       sombra tatil (FORMA), o cursor deixa de ser de clique
       (COMPORTAMENTO, pela 01-base.css), o aria-disabled e' ANUNCIADO, e o
       motivo vem ESCRITO ao lado via aria-describedby. */
.uc-botao[disabled]:not([aria-busy="true"]),
.uc-botao[aria-disabled="true"]:not([aria-busy="true"]){
  border-color:var(--uc-rule);
  background:var(--uc-paper-3);
  color:var(--uc-desabilitado-ink);
  box-shadow:none;
}

/* A 01-base.css ja poe `cursor:default` em `button:disabled`, e aquele
   seletor (0,1,1) vence o `.uc-botao` (0,1,0) sozinho. O que ela NAO pode
   pegar e' `<a aria-disabled>` nem `<button aria-disabled>` sem o atributo
   nativo -- e' o que esta linha fecha. `default` e nao `not-allowed` de
   proposito: a base ja decidiu, e dois cursores para o mesmo estado seriam
   dois vocabularios. */
.uc-botao[aria-disabled="true"]{
  cursor:default;
}

/* O motivo. Sem ele, "desabilitado" e' so' uma cor apagada e a pessoa fica
   sem saber o que fazer -- que e' exatamente o que o craft cobra do estado de
   erro: o que aconteceu, por que, o que da' para fazer. */
.uc-botao-motivo{
  margin-top:var(--sp-2);
  color:var(--uc-ink-2);
  font-size:var(--uc-s--1);
  font-weight:var(--uc-w-ler);
  line-height:var(--uc-lh-normal);
}

/* --------------------------------------------------------------------------
   ESTADO: ENVIADO, ESPERANDO RESPOSTA
   -------------------------------------------------------------------------- */

/* O craft manda TRAVAR CONTRA REENVIO. Travar e' trabalho do atributo
   (aria-disabled + o manipulador que nao reenvia), nao do CSS -- o CSS nao
   consegue impedir um segundo clique. O que ele faz aqui e' dizer, sem cor,
   que a coisa esta em curso:

     1. O ROTULO MUDA ("Resolver 20 questoes agora" -> "Abrindo o bloco...").
        E' o sinal mais forte: muda o NOME ACESSIVEL do botao, entao quem usa
        leitor de tela recebe a mesma informacao que quem ve.
     2. Um FIO que atravessa a base do botao.

   O FIO, e por que ele e' um fio: a tarefa C deu ao chip um fio de 1,5px
   separando rotulo e contagem -- e' a assinatura deste sistema. Aqui o mesmo
   primitivo faz outro trabalho: em vez de separar dois campos parados, ele
   ATRAVESSA. Mesmo vocabulario, funcao diferente; conversa com o chip em vez
   de competir com ele. Custa uma borda e nenhuma cor nova: `currentColor`
   funciona tanto no botao navy quanto no de papel, sem decidir cor duas
   vezes.

   `html[data-uc-js]` guarda a ANIMACAO pelo mesmo motivo do osso do
   esqueleto: sem JavaScript nada vai chegar, e um fio andando prometeria uma
   resposta que nunca vem. Sem JS o fio fica PARADO -- honesto: "ha algo
   acontecendo aqui", sem promessa. Movimento reduzido ja e' zerado
   globalmente pela 01-base.css.

   O keyframe tem nome PROPRIO do componente. Nome de @keyframes e' global no
   documento e nenhuma regra da guarda o governa (achado 2 do relatorio da
   tarefa C): consumir aqui o `uc-chip-brilho` seria uma dependencia entre
   arquivos que o lint nao ve e que morre calada no dia em que o chip nao for
   enfileirado. */
.uc-botao[aria-busy="true"]::after{
  content:"";
  position:absolute;
  inset-inline:0;
  bottom:0;
  height:var(--uc-borda);
  background-color:currentColor;
}

html[data-uc-js] .uc-botao[aria-busy="true"]::after{
  background-color:transparent;
  background-image:linear-gradient(
    90deg,
    transparent 0%,
    currentColor 50%,
    transparent 100%
  );
  background-size:300% 100%;
  animation:uc-botao-espera var(--uc-esqueleto-dur) var(--uc-ease) infinite;
}

@keyframes uc-botao-espera{
  from{ background-position:150% 0 }
  to{ background-position:-150% 0 }
}

/* --------------------------------------------------------------------------
   PECAS DE DENTRO
   -------------------------------------------------------------------------- */

/* O NUMERO DENTRO DO BOTAO — os 20% desta peca.
   Medido no tema antigo: `taxonomy.php:216` renderiza "Resolver <N> questoes
   agora", e o N muda conforme a pessoa escolhe o recorte (10, 20, 100...).
   Em fonte proporcional cada troca muda a LARGURA do botao, e o botao anda
   embaixo do dedo entre um toque e o seguinte.
   Mono + tabular-nums e' exatamente o que a tarefa C fez com a contagem do
   chip. Nao e' a mesma FORMA repetida (nao ha fio aqui): e' o mesmo
   VOCABULARIO -- neste sistema, numero e' dado, e dado se escreve em mono
   com largura fixa. E' assim que a peca conversa com o chip sem imitar. */
.uc-botao__n{
  font-family:var(--uc-mono);
  font-weight:var(--uc-w-realce);
  font-variant-numeric:tabular-nums;
}

/* O icone. `flex:none` para ele nunca ser espremido quando o rotulo e'
   longo -- sem isto, o caso de borda achata a seta ate ela virar um risco.
   16px e nao 12px como no chip: aqui ele acompanha um rotulo de frase, nao
   uma sigla. */
.uc-botao__icone{
  flex:none;
  width:16px;
  height:16px;
}

/* --------------------------------------------------------------------------
   ALVO DE TOQUE
   -------------------------------------------------------------------------- */

/* Regra do PONTEIRO, nao da largura da tela -- mesma decisao do chip.
   44x44 e' o compromisso de craft (WCAG 2.5.5 AAA / iOS HIG); o piso legal
   e' 24x24 (2.5.8 AA), que o botao ja passa com folga no mouse.
   A variante --texto entra aqui junto porque e' a unica sem padding: sem
   isto ela teria a altura da propria linha (~16px) e ficaria abaixo ate' do
   piso legal. E' o mesmo ajuste que o `.uc-chips__acao` tinha antes de virar
   variante daqui. */
@media (pointer:coarse){
  .uc-botao{
    min-height:var(--uc-alvo-toque);
    /* ⛔ E A LARGURA TAMBEM — o piso e' 44x44, nao 44 de altura.
       Medido em 06/09/2026 na tela de resolver, no dedo: o "Pausar" media
       41,4 x 44. A altura passava e a largura nao, e um alvo de 41px de
       largura e' o mesmo dedo errando. Era o UNICO controle do site abaixo
       do piso (varredura das 15 telas, ponteiro grosso) -- todos os outros
       ja nascem mais largos que 44px, entao esta linha nao move nenhum
       layout existente: ela fecha o caso do rotulo curto, o unico que pode
       nascer estreito.
       ⚠️ Isto sobrescreve o `min-width:0` da regra base, que existe para o
       rotulo de 43 caracteres poder encolher dentro da coluna. Nao reabre
       aquele defeito: 44px e' um piso ABSOLUTO e baixo, muito abaixo da
       largura de qualquer rotulo -- o que estourava a coluna era
       `min-width:auto` (o min-content do texto), nao um numero pequeno. */
    min-width:var(--uc-alvo-toque);
  }
}