/* VG0721 | 2026-07-22 | APP019 — cabecalho auto-ocultavel + trilho de rolagem da lista de vagas
   Paleta: azul royal VAGAS019 (#0C3882 / #1D4ED8 / #3B82F6 / #60A5FA) + branco. */

/* ===== 1. CABECALHO FIXO QUE SOME AO ROLAR PARA BAIXO ===== */
header.goldbar{transition:transform .26s cubic-bezier(.2,.8,.2,1)}
header.goldbar.hd-off{transform:translateY(-104%)}
@media(prefers-reduced-motion:reduce){header.goldbar{transition:none}}

/* rede de seguranca: se algo reativar .hdr-slim, a busca NAO encolhe (nunca sobra so o logo) */
body.hdr-slim .goldbar .searchbar{flex:1 1 auto!important;max-width:620px!important;width:auto!important;opacity:1!important;transform:none!important;pointer-events:auto!important;overflow:visible!important;border-width:1.5px!important}

/* ===== 2. TRILHO DE ROLAGEM VERTICAL DA LISTA DE VAGAS ===== */
#vgrail{position:fixed;right:9px;top:50%;transform:translateY(-50%);z-index:72;
  width:18px;height:50vh;min-height:200px;max-height:420px;
  display:none;align-items:center;justify-content:center;touch-action:none;
  opacity:0;transition:opacity .22s ease}
body.vgrail-on #vgrail{display:flex;opacity:1}

#vgrail .vgr-track{position:relative;width:6px;height:100%;border-radius:999px;
  background:rgba(12,56,130,.16);box-shadow:inset 0 0 0 1px rgba(96,165,250,.3)}
#vgrail .vgr-fill{position:absolute;left:0;top:0;width:100%;height:0;border-radius:999px;
  background:linear-gradient(180deg,#60A5FA,#3B82F6 45%,#1D4ED8)}
#vgrail .vgr-thumb{position:absolute;left:50%;top:0;width:16px;height:36px;margin-left:-8px;
  border-radius:999px;background:linear-gradient(180deg,#1D4ED8,#0C3882);
  border:1px solid rgba(255,255,255,.6);box-shadow:0 5px 14px -5px rgba(4,18,45,.8);
  cursor:grab;touch-action:none}
#vgrail.drag .vgr-thumb{cursor:grabbing}

#vgrail .vgr-pct{position:absolute;right:24px;transform:translateY(-50%);
  min-width:46px;padding:4px 9px;border-radius:999px;
  background:linear-gradient(135deg,#0C3882,#1D4ED8 70%,#3B82F6);color:#fff;
  font-size:11px;font-weight:800;letter-spacing:.2px;text-align:center;white-space:nowrap;
  box-shadow:0 6px 16px -8px rgba(4,18,45,.9);pointer-events:none}

@media(max-width:760px){
  #vgrail{right:6px;height:44vh;min-height:170px}
  #vgrail .vgr-pct{font-size:10.5px;padding:3px 8px;min-width:42px;right:22px}
}

/* ===== 3. BOTAO VOLTAR AO INICIO (no trilho) ===== */
#vgrail .vgr-top{position:absolute;top:-40px;left:50%;transform:translateX(-50%) scale(.6);
  width:32px;height:32px;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.5);background:linear-gradient(180deg,#1D4ED8,#0C3882);color:#fff;
  display:grid;place-items:center;opacity:0;pointer-events:none;
  box-shadow:0 6px 16px -8px rgba(4,18,45,.9);transition:opacity .2s ease,transform .2s ease}
#vgrail.tem-topo .vgr-top{opacity:1;pointer-events:auto;transform:translateX(-50%) scale(1)}
#vgrail .vgr-top svg{width:16px;height:16px}
#vgrail .vgr-top:hover{filter:brightness(1.12)}
#vgrail .vgr-top:focus-visible{outline:2px solid #60A5FA;outline-offset:2px}

/* ===== 4. FILTRO DA LISTA DE VAGAS (cidade + area) ===== */
#vgfil{display:none;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 14px}
body.vgfil-on #vgfil{display:flex}
#vgfil #vgfcid{flex:0 0 auto;max-width:230px;min-height:38px;padding:8px 12px;border-radius:10px;
  font:inherit;font-size:13px;font-weight:700;cursor:pointer;
  color:#fff;background:linear-gradient(145deg,#0C3882,#1D4ED8);border:1px solid rgba(96,165,250,.5)}
#vgfil #vgfcid:focus-visible{outline:2px solid #60A5FA;outline-offset:2px}
#vgfil .vgf-chips{display:flex;gap:7px;flex-wrap:wrap;flex:1 1 auto;min-width:0}
#vgfil .vgf-chip{min-height:34px;padding:7px 13px;border-radius:999px;font:inherit;font-size:12.5px;
  font-weight:700;cursor:pointer;white-space:nowrap;
  color:#1D4ED8;background:rgba(37,99,235,.09);border:1px solid rgba(37,99,235,.28);
  transition:background .15s,color .15s,border-color .15s}
#vgfil .vgf-chip:hover{background:rgba(37,99,235,.16)}
#vgfil .vgf-chip.on{color:#fff;background:linear-gradient(135deg,#0C3882,#1D4ED8);border-color:#1D4ED8}
#vgfil .vgf-chip:focus-visible{outline:2px solid #60A5FA;outline-offset:2px}
body:not(.claro019) #vgfil .vgf-chip{color:#BFD9FF;background:rgba(96,165,250,.12);border-color:rgba(96,165,250,.32)}
body:not(.claro019) #vgfil .vgf-chip.on{color:#fff;background:linear-gradient(135deg,#1D4ED8,#3B82F6);border-color:#60A5FA}
@media(max-width:600px){
  #vgfil{gap:8px;margin-bottom:12px}
  #vgfil #vgfcid{max-width:100%;flex:1 1 100%}
  #vgfil .vgf-chips{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;padding-bottom:2px}
  #vgfil .vgf-chips::-webkit-scrollbar{display:none}
}

/* ===== 5. BENEFICIO no lugar do salario ausente ===== */
.vc-sal.vc-ben{font-size:12px;font-weight:700;color:#E6EEFF;background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.16);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* aviso de lista vazia (filtro sem resultado) */
#vgfil .vgf-aviso{flex:1 1 100%;display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  margin-top:2px;padding:11px 14px;border-radius:12px;font-size:13px;font-weight:700;
  color:#0C3882;background:rgba(37,99,235,.08);border:1px solid rgba(37,99,235,.22)}
#vgfil .vgf-aviso button{min-height:34px;padding:7px 14px;border-radius:999px;border:0;cursor:pointer;
  font:inherit;font-size:12.5px;font-weight:800;color:#fff;background:linear-gradient(135deg,#0C3882,#1D4ED8)}
#vgfil .vgf-aviso button:hover{filter:brightness(1.1)}
body:not(.claro019) #vgfil .vgf-aviso{color:#CBDDFF;background:rgba(96,165,250,.1);border-color:rgba(96,165,250,.28)}

/* card: o codigo do anuncio para de disputar atencao com o selo da vaga */
.vc-top .vc-tag{order:1}
.vc-badges{order:2}
.vc-top .vc-code:not(.vc-tag){order:3;opacity:.72;font-size:9.5px;padding:2px 7px}

/* ===== 6. LEVEZA E FLUIDEZ | VG0728 2026-07-22 =====
   Medido: com 48 cards, cada .vc virava uma camada propria de GPU (will-change fixo do
   premium.css). Aqui a promocao so acontece no card sob o cursor. */
.vc{will-change:auto}
@media(hover:hover){.vc:hover{will-change:transform}}

/* NAO usar content-visibility nos cards: no grid, as linhas nao-pintadas ficam com altura
   estimada diferente da real (medido: 299px x 248px) e a lista pula ao rolar. */

/* entrada em cascata suave: so os primeiros da lista, e so para quem aceita animacao */
@media(prefers-reduced-motion:no-preference){
  .vc:nth-child(1){animation-delay:0ms}
  .vc:nth-child(2){animation-delay:26ms}
  .vc:nth-child(3){animation-delay:52ms}
  .vc:nth-child(4){animation-delay:78ms}
  .vc:nth-child(5){animation-delay:104ms}
  .vc:nth-child(6){animation-delay:130ms}
  .vc:nth-child(7){animation-delay:156ms}
  .vc:nth-child(8){animation-delay:182ms}
  .vc:nth-child(9){animation-delay:208ms}
  .vc:nth-child(10){animation-delay:234ms}
  .vc:nth-child(11){animation-delay:260ms}
  .vc:nth-child(12){animation-delay:286ms}
}
@media(prefers-reduced-motion:reduce){
  .vc,#vgfil,#vgrail .vgr-top{animation:none!important;transition:none!important}
}

/* o filtro e o trilho entram junto com a lista, sem salto */
#vgfil{animation:fadeUp .3s ease both}

/* ===== 7. ADAPTACAO A APARELHOS | VG0730 2026-07-22 =====
   Medido em 390 / 768 / 1920 px. */

/* (a) o trilho ficava POR CIMA do ultimo card (tablet: trilho em x=731, card ate 742).
   Agora a lista abre espaco para ele so quando ele esta na tela. */
body.vgrail-on #grid{padding-right:34px}
@media(max-width:600px){body.vgrail-on #grid{padding-right:20px}}

/* (b) o filtro comia 125px no tablet e 83px no celular antes da primeira vaga.
   Agora e uma linha so: cidade + areas deslizando ao lado. */
@media(max-width:900px){
  #vgfil{flex-wrap:wrap;align-items:center;gap:8px}
  /* select + areas ocupam a primeira linha inteira; o aviso cai para a linha de baixo */
  #vgfil .vgf-chips{flex:1 1 0}
  #vgfil #vgfcid{flex:0 0 41%;max-width:41%;min-width:120px}
  #vgfil .vgf-chips{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;padding:2px 0;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
    mask-image:linear-gradient(90deg,#000 88%,transparent)}
  #vgfil .vgf-chips::-webkit-scrollbar{display:none}
  #vgfil .vgf-aviso{order:9;flex:1 1 100%;min-width:100%}
}

/* (c) alvo de toque de 44px (regra da casa) sem engordar o desenho */
@media(max-width:900px){
  #vgfil .vgf-chip{min-height:44px;padding-top:0;padding-bottom:0;display:inline-flex;align-items:center}
  #vgfil #vgfcid{min-height:44px}
  #vgrail .vgr-top{width:40px;height:40px}
  #vgrail .vgr-top::after{content:'';position:absolute;inset:-6px}
}
/* menu e interruptor de tema: area de toque maior, aparencia identica */
@media(max-width:900px){
  .goldbar .lanche,.goldbar #modeswitch{position:relative}
  .goldbar .lanche::after,.goldbar #modeswitch::after{content:'';position:absolute;
    left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
}

/* (d) no celular o trilho e so INDICADOR: arrastar ali brigava com o gesto de rolar
   e com o voltar-por-deslize do iOS. O botao de inicio continua clicavel. */
@media(max-width:600px){
  #vgrail{width:14px;right:4px}
  #vgrail .vgr-track{pointer-events:none}
  #vgrail .vgr-thumb{width:14px;margin-left:-7px}
  #vgrail .vgr-pct{right:20px}
}

/* (e) telas largas: a lista nao vira uma parede de 5 colunas coladas */
@media(min-width:1500px){
  #vgfil{max-width:1600px}
}

/* A2: etiqueta de porcentagem so enquanto rola (no celular ela cobria a borda do card) */
@media(max-width:600px){
  #vgrail .vgr-pct{opacity:0;transition:opacity .25s ease}
  #vgrail.ativo .vgr-pct{opacity:1}
}

/* o botao do aviso tambem precisa dos 44px de toque no celular */
@media(max-width:900px){#vgfil .vgf-aviso button{min-height:44px}}

/* ===== 8. TELAS ESTREITAS E ALVOS DE TOQUE | VG0736 2026-07-22 =====
   Medido em 320px: a barra de busca tinha 122px, mas o CAMPO DE TEXTO ficava com 8px —
   o logo (74px) + Buscar + microfone + tema + menu comiam tudo. Abaixo de 380px o logo
   sai e o campo passa a ter espaco de verdade. */
@media(max-width:380px){
  .goldbar .lghome{display:none}
  .goldbar .searchbar{flex:1 1 auto;min-width:0}
}

/* alvo de toque de 44px tambem no desktop (regra da casa): o botao Buscar tinha 31px
   e o interruptor de tema 34px. A aparencia nao muda — cresce so a area sensivel. */
.goldbar .go{min-height:44px}
.goldbar #modeswitch{position:relative}
.goldbar #modeswitch::after{content:'';position:absolute;left:50%;top:50%;
  width:44px;height:44px;transform:translate(-50%,-50%)}

/* local no lugar da empresa ausente (card de vaga) — cor de apoio, nao de marca */
.vc-emp.vc-loc{display:inline-flex;align-items:center;gap:5px;color:#CBDDFF;font-weight:600;font-size:12px}
.vc-emp.vc-loc svg,.vc-emp.vc-loc .ic{width:12px;height:12px;opacity:.85;flex:0 0 auto}

/* ===== 9. LEGIBILIDADE | VG0744 2026-07-22 =====
   Medido na home: 222 textos abaixo de 11px. Os chips de cidade do card estavam a 8,8px —
   subo para 10,5px, que ainda cabe na linha de 19px (medido antes/depois).
   NAO mexo no carrossel de lojas: a caixa dele tem 92x90px e texto legivel nao cabe ali —
   aquilo pede decisao de layout, nao ajuste de fonte. */
/* REGRA REMOVIDA: nao adianta. Quem manda no tamanho do chip e o ui.js, que INJETA
   ".mc .citychip,.mc .catchip{font-size:8.8px!important}" (e 10px acima de 900px) — CSS
   com !important vindo de <style> injetado. Os 11px declarados no cards.css estao mortos.
   O conserto e no ui.js, arquivo da sessao de lojas. Nao empilhar !important aqui. */


/* VG0762 2026-07-22 — ALVO DE TOQUE DA BUSCA (medido em 375px, UA mobile)
   O campo de busca do cabecalho tinha area de toque real de 26px de altura.
   O container .searchbar tem 54px, mas NAO e <label> e nao tem onclick:
   testei clicar na borda dele e o campo NAO recebia foco — ou seja, os 54px
   eram visuais, o alvo real eram 26px. Abaixo dos 44px de referencia, no
   elemento mais usado do site.
   Correcao: o campo passa a ocupar 44px dentro do container, que continua com
   54px. Medido: cabecalho segue com 71px, sem rolagem lateral, sem mexer em
   nenhum outro elemento. */
@media (max-width: 640px){
  .searchbar input{ min-height:44px; height:44px; box-sizing:border-box; }
}


/* VG0763 2026-07-22 — ALVO DE TOQUE DOS CHIPS DE CATEGORIA (regra proposta pela sessao de lojas)
   Os chips da barra #words tinham area de toque menor que 44px. A primeira ideia era aumentar
   o chip, mas eu levantei que isso empurraria a primeira tela para baixo — e a medicao deu razao
   ao cuidado: a barra ja tem folga vertical propria (57px de barra para 41px de chip).
   Entao NAO se cresce nada: estica-se a area de toque para dentro da folga que ja existe.
   Usa ::before porque o ::after ja e do indicador da aba ativa; o chip ja e position:relative.
   MEDIDO antes de aplicar: barra 57px (igual), chip 41px (igual), topo do 1o card 589px (igual,
   zero deslocamento), sem rolagem lateral. E provado por acerto real: elementFromPoint 6px ACIMA
   do chip passou a devolver o proprio chip, onde antes devolvia o fundo da barra. */
@media (max-width: 640px){
  #words a::before{ content:""; position:absolute; left:0; right:0; top:-8px; bottom:-8px; }
}


/* VG0766 2026-07-22 — ZOOM DO IPHONE NO FILTRO DE CIDADE
   Achado a partir da correcao que a sessao de lojas fez nas paginas de cadastro: o Safari do iOS
   da zoom automatico ao focar campo com fonte < 16px. O #vgfcid estava com 13px — a pessoa toca
   no filtro, a tela salta e ela precisa pincar de volta.
   ⚑Subir para 16px SOZINHO cortava o texto: medido, "Santa Rita do Passa Quatro" precisa de
   140px e a caixa tinha 132 (13px cabia em 132, 16px nao). Por isso vem junto o max-width:none
   e o flex: a caixa cresce para 284px e o nome cabe inteiro.
   MEDIDO antes de aplicar, em 375px: 13->16px · 134->284px de largura · texto cortado: nao ·
   rolagem lateral: nao. Desktop nao muda (regra so ate 640px). 74 cidades no seletor. */
@media (max-width: 640px){
  #vgfcid, #vgfarea{ font-size:16px !important; max-width:none !important; flex:1 1 auto !important; }
}