/* ============================================================
   GX — ajustes do porte
   Carregado DEPOIS de style.css. Só correções; o visual do tema
   original fica intacto.
   ============================================================ */

/* ---------- Font Awesome Free ----------
   O tema usa far (222x), fas (65x), fab (25x) e fal (11x). No FA Free o Regular
   tem poucos ícones e o Light não existe — os dois renderizariam em branco.
   Apontamos far/fal para a face Solid, que tem todos os nomes usados. Fica um
   traço um pouco mais grosso do que o desenho original, e nada some. */
.far, .fal, .fa-regular, .fa-light {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
}
.fas, .fa-solid { font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; }
.fab, .fa-brands { font-family: "Font Awesome 6 Brands" !important; font-weight: 400 !important; }

/* 5 ícones do tema só existem no FA Pro — renderizariam vazios.
   Mapeamos cada um para o equivalente mais próximo do Free. */
.fa-trophy-alt::before      { content: "\f091"; }   /* -> trophy */
.fa-user-headset::before    { content: "\f590"; }   /* -> headset */
.fa-users-medical::before   { content: "\f0c0"; }   /* -> users */
.fa-brackets-curly::before  { content: "\f121"; }   /* -> code */
.fa-chart-line-down::before { content: "\e097"; }   /* -> arrow-trend-down */

/* ---------- select2 alinhado ao resto do formulário ----------
   O tema estilizava o select2 com medidas próprias, que não batem com as dos
   outros campos: padding 9px/24px contra 10px, raio 15px fixo contra var(--radius),
   e borda em var(--second-bg) — a mesma cor do fundo, ou seja, invisível. O campo
   ficava mais baixo, com o texto deslocado e sem moldura. Aqui ele passa a ter
   exatamente as medidas de .form-control. */
.select2.select2-container .select2-selection {
  height: 50px;
  padding: 10px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.select2.select2-container .select2-selection .select2-selection__rendered {
  line-height: 28px;          /* 50 - 2×10 padding - 2×1 borda */
  padding-left: 0;
  padding-right: 28px;        /* espaço da seta */
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.01em;
}

.select2.select2-container .select2-selection .select2-selection__arrow {
  height: 48px;
  right: 8px;
}

.select2.select2-container.select2-container--focus .select2-selection,
.select2.select2-container.select2-container--open .select2-selection {
  border: 1px solid var(--mc);
  border-radius: var(--radius);
}

/* a lista aberta segue a mesma moldura */
.select2-container--default .select2-dropdown {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--second-bg);
  color: var(--tc);
  padding: 8px 10px;
}

/* NÃO esconder o <select> nativo aqui.
   Eu tinha posto `select[data-select] { visibility: hidden }` para evitar o piscar
   antes do select2 montar. Duas coisas erradas nisso:
     1. o par `.select2-container ~ select` nunca casa — o select2 insere o
        container com insertAfter(), então ele vem DEPOIS do select, e o seletor
        de irmão exigia o contrário. Só a regra de esconder ficava valendo.
     2. esconder por padrão e revelar via JS é o avesso de melhoria progressiva:
        se o select2 demora ou falha, os campos simplesmente somem da tela.
   O próprio select2 já cuida disso com .select2-hidden-accessible. */

/* ---------- botão de sair ----------
   Virou <form><button> (POST + CSRF) e precisa parecer o <a> que era. */
.gx-logout { margin: 0; }
.gx-logout .dropdown-link {
  width: 100%;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

/* ---------- legibilidade ----------
   Mesmo critério aplicado ao smmspot: texto secundário precisa passar em
   WCAG AA (4.5:1). Os tokens do GX para texto apagado ficam abaixo disso no
   modo escuro; aqui subimos só os de TEXTO, sem tocar em fundo nem em marca. */
html.dark {
  --tc-light: #a8b0bd;   /* era um cinza mais apagado sobre #0e1015 */
  --tc-mute:  #99a2b0;
}

/* o corpo do tema herda 400 em vários pontos; 500 dá o peso que falta no escuro */
html.dark body { font-weight: 500; }

/* nunca afinar texto claro sobre fundo escuro */
body { -webkit-font-smoothing: auto; }

/* ---------- sem overflow horizontal no celular ---------- */
html, body { max-width: 100%; overflow-x: hidden; }

/* a barra inferior cobre o fim da página; garante respiro para o conteúdo */
@media (max-width: 991px) {
  #dash .app-content { padding-bottom: 84px; }
}

/* ---------- cartões de "Mais vendidos" ----------
   O tema não trazia estilo para eles: no original o bloco era preenchido por
   scraping e reaproveitava o CSS da página de serviços, que aqui não é carregada. */
.neworder-recommend .services-wrapper { display: grid; gap: 10px; }

.neworder-recommend .services-card {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--second-bg);
  cursor: pointer;
  transition: border-color .15s, transform .15s;
}
.neworder-recommend .services-card:hover { border-color: var(--mc); transform: translateY(-1px); }

.neworder-recommend .sc-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.neworder-recommend .sc-id {
  padding: 2px 8px; border-radius: 6px;
  background: var(--mc); color: #fff; font-size: 12px; font-weight: 700;
}
.neworder-recommend .sc-badge {
  margin-left: auto; font-size: 12px; font-weight: 600; color: var(--mc);
}
.neworder-recommend .sc-name {
  margin: 0 0 8px; font-size: 13px; line-height: 1.45; color: var(--tc);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.neworder-recommend .sc-foot b { font-size: 15px; font-weight: 700; color: var(--tc); }
.neworder-recommend .sc-foot small { margin-left: 5px; font-size: 12px; opacity: .7; }

/* ---------- busca de serviço (autocomplete) ----------
   A lupa é um <button> absoluto dentro do campo; sem reservar espaço à esquerda
   o texto passa por baixo dela. (O left:12px vivia no condicional de RTL do tema
   original e se perdeu no porte — reposto no markup.)
   A lista de sugestões é nossa: o tema só estilizava o ícone. */
#new-order-search { position: relative; }
#new-order-search .input-wrapper { position: relative; }
#new-order-search #template-input { padding-left: 38px; }
#new-order-search button .fa-search { color: var(--tc-light, #8a94a6); font-size: 14px; }

/* O tema JÁ trata este bloco: card com padding, gap 15px, e empilhado com
   gap 5px no celular. Eu tinha reescrito tudo e introduzi um bug: `flex: 1 1 260px`
   no .form-group é raciocínio de linha — quando o container vira column no celular,
   o flex-basis passa a valer como ALTURA, e o campo de busca ganhava 260px de altura
   com o input no topo. Era o "espaçamento enorme" antes do botão de filtro.
   Aqui só o que o tema não cobre: o botão acompanhar a altura do campo. */
.neworder-top .form-group { flex: 1 1 auto; min-width: 0; }
.neworder-top #neworder-filter-btn { flex: none; height: 50px; }

.gx-ac {
  position: absolute;
  z-index: 50;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: min(56vh, 380px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  background: var(--main-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .55);
}

.gx-ac-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 10px;
  background: none;
  text-align: left;
  cursor: pointer;
}
.gx-ac-item:hover,
.gx-ac-item.on { background: var(--second-bg); }

.gx-ac-id {
  flex: none;
  margin-top: 1px;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--mc);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.gx-ac-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.gx-ac-nome {
  color: var(--tc);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gx-ac-cat { color: var(--tc-light, #8a94a6); font-size: 12px; }

.gx-ac-preco {
  flex: none;
  margin-top: 1px;
  color: var(--mc);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.gx-ac-vazio { padding: 14px 10px; text-align: center; color: var(--tc-light, #8a94a6); font-size: 13px; }

@media (max-width: 575px) {
  /* o tema já empilha o bloco; aqui só o botão em largura cheia e a
     base do flex zerada, senão ela reapareceria como altura */
  .neworder-top .form-group { flex: 0 0 auto; width: 100%; }
  .neworder-top #neworder-filter-btn { width: 100%; justify-content: center; }
  .gx-ac-preco { display: none; }   /* o preço já aparece ao selecionar */
}

/* ============================================================
   Páginas portadas — classes nossas (o tema não as trazia)
   Prefixo gx- para nunca colidir com o style.css do tema.
   ============================================================ */

/* ---- chave de API ---- */
.gx-key { display: flex; gap: 8px; }
.gx-key .form-control { flex: 1; font-family: ui-monospace, monospace; }
.gx-key .btn { flex: none; }
.gx-pre {
  margin: 0; padding: 12px 14px; overflow-x: auto;
  background: var(--second-bg); border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: ui-monospace, monospace; font-size: 12.5px; line-height: 1.6; color: var(--tc);
}

/* ---- abas de filtro + busca ---- */
.gx-abas { display: flex; flex-wrap: wrap; gap: 6px; }
.gx-aba {
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--second-bg);
  color: var(--tc-light, #8a94a6); font-size: 13px; font-weight: 600;
}
.gx-aba:hover { color: var(--tc); }
.gx-aba.on { background: var(--mc); border-color: var(--mc); color: #fff; }

.gx-busca { display: flex; gap: 8px; margin-top: 12px; }
.gx-busca .form-control { flex: 1; }
.gx-busca .btn { flex: none; }

/* ---- cartão de pedido ---- */
.gx-order + .gx-order { margin-top: 12px; }
.gx-order-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.gx-order-head .order-id { font-weight: 700; color: var(--tc); }
.gx-order-head .order-date { margin-left: auto; font-size: 12.5px; color: var(--tc-light, #8a94a6); }

.gx-tag { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.gx-tag--ok   { background: rgba(34,197,94,.16);  color: #4ade80; }
.gx-tag--run  { background: rgba(59,130,246,.16); color: #7fb0ff; }
.gx-tag--wait { background: rgba(234,179,8,.16);  color: #fbc02d; }
.gx-tag--part { background: rgba(168,85,247,.16); color: #c084fc; }
.gx-tag--off  { background: rgba(148,163,184,.16); color: #9aa6b8; }

.gx-order-nome { margin: 0 0 4px; font-weight: 600; color: var(--tc); line-height: 1.45; }
.gx-order-link { margin: 0 0 10px; font-size: 13px; word-break: break-all; color: var(--tc-light, #8a94a6); }
.gx-order-link a { color: var(--mc); }
.gx-order-erro { margin: 0 0 10px; font-size: 13px; color: #ff8a87; }

.gx-progresso { height: 6px; border-radius: 6px; background: var(--second-bg); overflow: hidden; margin-bottom: 12px; }
.gx-progresso i { display: block; height: 100%; background: var(--mc); border-radius: 6px; }

.gx-order-nums { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-bottom: 12px; }
.gx-order-nums span { display: flex; flex-direction: column; gap: 2px; }
.gx-order-nums small { font-size: 11.5px; color: var(--tc-light, #8a94a6); }
.gx-order-nums b { font-size: 14px; color: var(--tc); }

.gx-order-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.gx-order-acoes form { margin: 0; }
.gx-danger { color: #ff8a87; }

@media (max-width: 575px) {
  .gx-order-head .order-date { margin-left: 0; flex: 1 1 100%; }
  .gx-order-nums { gap: 10px 18px; }
  .gx-order-acoes .btn, .gx-order-acoes form { flex: 1 1 100%; }
  .gx-order-acoes .btn { justify-content: center; width: 100%; }
}

/* ---- utilitários compartilhados das páginas portadas ---- */
.gx-dim { color: var(--tc-light, #8a94a6); font-size: 12.5px; }
.gx-big { display: block; margin-top: 4px; font-size: 22px; font-weight: 700; color: var(--tc); letter-spacing: -.5px; }

.gx-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 991px) { .gx-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.gx-lista { display: flex; flex-direction: column; gap: 8px; }
.gx-lista-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--second-bg);
}
a.gx-lista-item:hover { border-color: var(--mc); }
.gx-lista-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gx-lista-tx b { color: var(--tc); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; }
.gx-lista-tx small { color: var(--tc-light, #8a94a6); font-size: 12px; }

/* ---- saldo: métodos e atalhos ---- */
.gx-metodos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 767px) { .gx-metodos { grid-template-columns: minmax(0, 1fr); } }
.gx-metodo input { position: absolute; opacity: 0; pointer-events: none; }
.gx-metodo-box {
  display: flex; flex-direction: column; gap: 3px;
  padding: 14px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--second-bg); cursor: pointer;
}
.gx-metodo-box i { font-size: 18px; color: var(--mc); margin-bottom: 4px; }
.gx-metodo-box b { color: var(--tc); font-size: 14px; }
.gx-metodo-box small { color: var(--tc-light, #8a94a6); font-size: 12px; }
.gx-metodo input:checked + .gx-metodo-box { border-color: var(--mc); box-shadow: 0 0 0 1px var(--mc) inset; }

.gx-atalhos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.gx-pix { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
.gx-pix-qr { width: 200px; height: 200px; border-radius: var(--radius); background: #fff; padding: 8px; }
.gx-pix-lado { flex: 1; min-width: 260px; }
.gx-pix-lado textarea { font-family: ui-monospace, monospace; font-size: 12px; word-break: break-all; }

/* ---- tickets: conversa ---- */
.gx-chat { display: flex; flex-direction: column; gap: 14px; }
.gx-msg { max-width: 82%; }
.gx-msg--eu { align-self: flex-end; }
.gx-msg-meta { display: flex; gap: 8px; margin-bottom: 4px; font-size: 11.5px; color: var(--tc-light, #8a94a6); }
.gx-msg-meta b { color: var(--tc); }
.gx-msg-bolha {
  padding: 11px 14px; border-radius: var(--radius);
  background: var(--second-bg); border: 1px solid var(--border);
  color: var(--tc); font-size: 13.5px; line-height: 1.6;
}
.gx-msg--eu .gx-msg-bolha { background: var(--mc); border-color: var(--mc); color: #fff; }
@media (max-width: 575px) { .gx-msg { max-width: 100%; } }

/* ---- cadastro ---- */
.gx-auth { max-width: 720px; margin: 34px auto; }
.gx-check { display: flex; align-items: flex-start; gap: 9px; font-weight: 500; }
.gx-check input { margin-top: 3px; flex: none; }
.gx-check a { color: var(--mc); }
.gx-ou { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--tc-light, #8a94a6); font-size: 12.5px; }
.gx-ou::before, .gx-ou::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.w-100 { width: 100%; justify-content: center; }

/* ---- modal do Pix ---- */
.gx-pix-estado { min-height: 120px; }
.gx-pix-valor { margin: 0 0 10px; font-size: 14px; color: var(--tc-light, #8a94a6); }
.gx-pix-valor b { color: var(--tc); font-size: 16px; }

.gx-spinner {
  width: 34px; height: 34px; margin: 18px auto 12px;
  border: 3px solid var(--border); border-top-color: var(--mc);
  border-radius: 50%; animation: gx-gira .8s linear infinite;
}
@keyframes gx-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .gx-spinner { animation-duration: 2.4s; } }
.gx-pix-estado[data-estado="loading"] { text-align: center; }

.gx-pix-ok {
  width: 56px; height: 56px; margin: 6px auto 14px;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(34,197,94,.16); color: #4ade80; font-size: 24px;
}

/* dentro do modal a coluna do QR empilha */
#gxPix .gx-pix { flex-direction: column; align-items: center; }
#gxPix .gx-pix-lado { width: 100%; min-width: 0; }
#gxPix .gx-pix-qr { width: 220px; height: 220px; }

/* ---- prosa (termos, privacidade, FAQ) ----
   O tema não trazia estilo para texto corrido: essas páginas caíam no visual do
   tema claro por não existirem os templates 'info' e 'pagina-simples'. */
.gx-doc { max-width: 860px; margin: 34px auto; }
.gx-doc-topo { margin-bottom: 18px; }
.gx-doc-topo h1 { margin: 0 0 4px; font-size: 26px; font-weight: 700; letter-spacing: -.6px; color: var(--tc); }

.gx-prosa { color: var(--tc-light, #a8b0bd); font-size: 14px; line-height: 1.75; }
.gx-prosa h1, .gx-prosa h2, .gx-prosa h3 {
  margin: 26px 0 10px; color: var(--tc); font-weight: 700; letter-spacing: -.3px;
}
.gx-prosa h1 { font-size: 20px; }
.gx-prosa h2 { font-size: 17px; }
.gx-prosa h3 { font-size: 15px; }
.gx-prosa > :first-child { margin-top: 0; }
.gx-prosa p { margin: 0 0 12px; }
.gx-prosa b, .gx-prosa strong { color: var(--tc); }
.gx-prosa a { color: var(--mc); }
.gx-prosa ul, .gx-prosa ol { margin: 0 0 14px; padding-left: 22px; }
.gx-prosa li { margin-bottom: 6px; }
.gx-prosa hr { margin: 22px 0; border: 0; border-top: 1px solid var(--border); }
.gx-prosa code {
  padding: 1px 6px; border-radius: 5px; background: var(--second-bg);
  font-family: ui-monospace, monospace; font-size: .9em; color: var(--tc);
}
.gx-prosa pre {
  margin: 0 0 14px; padding: 12px 14px; overflow-x: auto;
  background: var(--second-bg); border: 1px solid var(--border); border-radius: var(--radius);
  font-family: ui-monospace, monospace; font-size: 12.5px; color: var(--tc);
}
.gx-prosa table { width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: 13.5px; }
.gx-prosa th, .gx-prosa td {
  padding: 9px 10px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--border);
}
.gx-prosa th { color: var(--tc); font-weight: 600; }

@media (max-width: 767px) { .gx-doc { margin: 20px auto; } }

/* ---- imagens do próprio tema ----
   .sc-features do tema espera .sc-features-item (bolinha 30px colorida); os meus
   selos são texto, então usam classe própria e não brigam com a dele. */
.gx-feat {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  background: var(--second-bg); border: 1px solid var(--border);
  font-size: 11.5px; font-weight: 600; color: var(--tc-light, #8a94a6);
}
.gx-feat i { font-size: 11px; }

.gx-svc-busca { flex: 1 1 auto; min-width: 0; }
.gx-svc-busca .input-wrapper { position: relative; }
.gx-svc-busca #gx-svc-q { padding-left: 38px; }
.gx-svc-busca button {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  padding: 0 2px; background: none; border: 0; line-height: 0;
  color: var(--tc-light, #8a94a6);
}

/* bandeiras de pagamento (assets/img/payment do tema) */
.gx-metodo-logo { border-radius: 8px; margin-bottom: 4px; }
.gx-bandeiras { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.gx-bandeiras img { border-radius: 6px; opacity: .9; }

/* ---- recuperação de senha e 404 ----
   A casca .signup-*/.shl-* é do tema; aqui só os selos de estado e a 404,
   que o GX não traz. */
.gx-reset-ok {
  width: 58px; height: 58px; margin: 0 auto 14px;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(99,61,254,.16); color: var(--mc); font-size: 24px;
}
.gx-reset-ok--verde { background: rgba(34,197,94,.16); color: #4ade80; }
.gx-reset-ok--erro  { background: rgba(239,68,68,.16); color: #ff8a87; }

.gx-404 { max-width: 560px; margin: 60px auto; }
.gx-404 .card-body { text-align: center; padding: 40px 26px 44px; }
.gx-404-num {
  font-size: 68px; font-weight: 800; line-height: 1;
  letter-spacing: -3px; color: var(--mc); margin-bottom: 10px;
}
.gx-404 h1 { margin: 0 0 6px; font-size: 22px; font-weight: 700; color: var(--tc); }
.gx-404-acoes { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
@media (max-width: 480px) {
  .gx-404 { margin: 30px auto; }
  .gx-404-acoes .btn { width: 100%; justify-content: center; }
}

/* A lista de recomendados da LP usa .item/.item-row/.sr-* do próprio tema —
   nada nosso aqui. Antes eu tinha .gx-rec com cores fixas, invisível no claro. */

/* ---------- campo de e-mail do hero ----------
   .home-join é estilizado pelo tema (card em flex), mas o input dentro dele
   (.join-control) não tem NENHUMA regra — nem no CSS original. Renderizava com o
   visual padrão do navegador: fundo branco e borda cinza dentro de um card escuro.
   Aqui ele passa a ser transparente e herdar o tipo do tema. */
.home-join .join-control {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--tc);
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  outline: none;
}
.home-join .join-control::placeholder { color: var(--tc-light, #8a94a6); }
.home-join .join-control:-webkit-autofill {
  -webkit-text-fill-color: var(--tc);
  -webkit-box-shadow: 0 0 0 60px var(--card-bg) inset;
}
/* no celular o tema já reduz o bloco para max-width 400px */
@media (max-width: 767px) {
  .home-join .join-control { height: 38px; font-size: 13.5px; }
}

/* ---------- ícones do ico() dentro das páginas de conteúdo ----------
   As páginas públicas (/servicos e /api deslogados, termos, faq) recebem HTML
   montado pelos controladores, que embutem ico(): um <svg viewBox="0 0 24 24">
   SEM width/height. O tema 'claro' os dimensiona com ~40 regras contextuais
   (.nav .ico svg, .alerta svg, .page-card .pc-ic svg…). O GX não tem nenhuma —
   e SVG sem dimensão cai no padrão de elemento substituído, ~300×150px.
   Por isso apareciam gigantes. Aqui damos um tamanho base e os alinhamos ao texto. */
.gx-prosa svg:not([width]),
.gx-doc svg:not([width]) {
  width: 1.05em;
  height: 1.05em;
  vertical-align: -.16em;
  flex: none;
}

/* dentro de tabela/lista de preços o ícone acompanha a linha */
.gx-prosa td svg:not([width]),
.gx-prosa th svg:not([width]),
.gx-prosa li svg:not([width]) { width: 15px; height: 15px; }

/* ícone que abre um bloco (título de categoria, alerta) fica um pouco maior */
.gx-prosa h2 svg:not([width]),
.gx-prosa h3 svg:not([width]) { width: 18px; height: 18px; vertical-align: -.14em; }