/* MÓDULO: layout | EXTRAÍDO DE: app019-app.html | VERSÃO: 1.2 | DATA: 2026-07-05 — menu lanche v3 (painel metade direita, so palavras) */

/* barra: logo oficial 3x + lanche */
.goldbar{position:sticky;top:0;z-index:40;background:linear-gradient(100deg,#050505 0%,#0a0806 44%,#150f08 60%,#2a1d06 74%,#4d3708 86%,#7a5410 95%,#9a6400 100%);box-shadow:0 2px 14px rgba(40,26,0,.28);display:flex;align-items:center;padding:5px 16px;transition:transform .5s cubic-bezier(.34,1.56,.64,1),box-shadow .3s}
.goldbar.hide{transform:translateY(-115%)}
.goldbar .lg{height:96px;width:auto;object-fit:contain;filter:drop-shadow(0 3px 7px rgba(0,0,0,.4))}
.goldbar .spacer{flex:1}
.goldbar .lanche{width:46px;height:46px;border-radius:14px;background:linear-gradient(160deg,rgba(150,106,20,.62),rgba(70,46,4,.5));border:1.5px solid rgba(212,164,54,.7);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);color:#ffe39a;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -3px 8px -3px rgba(0,0,0,.5),0 4px 10px -3px rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .15s}
.goldbar .lanche:hover{transform:scale(1.06)}.goldbar .lanche svg{width:22px;height:22px}
/* DESKTOP: logo 2x (188px) sem engordar a barra — margens negativas usam a moldura transparente do PNG 400x400 */
@media(min-width:601px){.goldbar{padding-top:calc(env(safe-area-inset-top,0px) + 10px);padding-bottom:2px}.goldbar .lg{height:72px;margin:-6px 0}}
/* MOBILE: cabeçalho em 1 linha — logo | searchbar flex | mic | buscar | lanche */
@media(max-width:600px){
 .goldbar{padding:6px 10px;padding-top:calc(env(safe-area-inset-top,0px) + 14px)}
 .goldbar .inner{flex-wrap:nowrap;gap:6px;align-items:center}
 .goldbar .lg{height:12px;margin:0;flex:0 0 auto}
 .goldbar .accchip{display:none}
 .goldbar .lanche{order:unset;margin-left:0;width:36px;height:36px;border-radius:10px;flex:0 0 36px}
 .goldbar .lanche svg{width:18px;height:18px}
 .goldbar .searchbar{flex:1;min-width:0;width:auto;max-width:none;margin:0;padding:4px 5px 4px 10px}
 .goldbar .searchbar .lupa{display:none}
 .goldbar .searchbar input{font-size:16px;min-width:0}
 .goldbar .searchbar .go{padding:7px 9px;font-size:10px;border-radius:10px;white-space:nowrap}
 .micbtn::before,.micbtn::after{display:none}
 .micbtn{width:28px;height:28px;flex:0 0 28px}
 .micbtn svg{width:14px;height:14px}
}

/* menu lateral direita (vidro transparente) */
/* ===== MENU LANCHE v3.1 | 2026-07-05 — painel compacto no canto SUPERIOR DIREITO (metade da largura da tela no mobile), so palavras (sem icones), margem inferior de 18% garantida, zoom com mola + cascata + brilho varrendo o CTA ===== */
:root{--app-gold:#d8a92f;--app-gold-light:#ffd86b;--app-gold-dark:#8a5b0a;--app-border-gold:rgba(255,203,80,.32);--app-text:#fff;--app-muted:rgba(255,255,255,.72)}
/* overlay: escurece + desfoca o fundo sem esconder */
.ovl{position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,visibility .22s ease}
.ovl.open{opacity:1;visibility:visible;pointer-events:auto}
/* painel: fixo na DIREITA em cima; largura = 50vw no mobile; base nunca passa de 82% da altura (18% livre embaixo) */
.drawer{box-sizing:border-box;position:fixed;z-index:60;left:auto;right:10px;top:calc(env(safe-area-inset-top,0px) + 60px);
  width:50vw;min-width:186px;max-width:320px;
  max-height:calc(82vh - 70px);max-height:calc(82dvh - env(safe-area-inset-top,0px) - 60px);
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:13px 12px 15px;
  background:rgba(8,7,4,.86);backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);
  border:1px solid rgba(255,199,64,.26);border-radius:22px;
  box-shadow:0 24px 70px rgba(0,0,0,.6),0 0 40px rgba(212,160,32,.18),inset 0 1px 0 rgba(255,255,255,.10);
  opacity:0;visibility:hidden;pointer-events:none;transform-origin:top right;transform:translateY(-10px) scale(.72);
  transition:opacity .26s ease,transform .3s cubic-bezier(.34,1.56,.64,1),visibility .26s ease}
.drawer.open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1)}
.drawer::before{content:'';position:absolute;left:14px;right:14px;top:0;height:1px;pointer-events:none;opacity:.7;
  background:linear-gradient(90deg,transparent,rgba(255,216,107,.55),transparent)}
@media(min-width:768px){.drawer{right:16px;top:76px;width:340px;max-width:340px;max-height:calc(82vh - 76px);padding:16px 15px 18px;border-radius:24px}}
@media(prefers-reduced-motion:reduce){.drawer,.ovl{transition:opacity .12s linear}.drawer{transform:none!important}.drawer.open .di{animation:none!important}.dmenu .di-cta::before{animation:none!important}}
/* cabecalho do menu */
.drawer .dh{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.drawer .dh b{font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--app-gold-light);
  -webkit-text-fill-color:var(--app-gold-light);background:none;animation:none;text-shadow:0 0 14px rgba(255,216,107,.35)}
@media(min-width:768px){.drawer .dh b{font-size:14px}}
.drawer .dh .x{width:34px;height:34px;min-width:34px;border-radius:11px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,215,95,.38);color:var(--app-gold-light);display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease}
.drawer .dh .x:hover{background:rgba(255,255,255,.1);box-shadow:0 0 16px -3px rgba(245,188,52,.6);transform:scale(1.06)}
.drawer .dh .x:active{transform:scale(.9)}
.drawer .dh .x:focus-visible{outline:2px solid var(--app-gold-light);outline-offset:2px}
.drawer .dh .x svg{width:15px;height:15px}
/* lista: 1 coluna compacta, SO PALAVRAS */
.dmenu{display:grid;grid-template-columns:1fr;gap:7px}
/* botao base premium 3D estufado */
.di{box-sizing:border-box;display:flex;align-items:center;justify-content:center;min-height:42px;padding:9px 10px;border-radius:13px;
  color:var(--app-text);font-size:12.5px;font-weight:700;line-height:1.2;cursor:pointer;text-align:center;position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(45,37,22,.92),rgba(14,13,10,.96));border:1px solid rgba(255,201,74,.32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -7px 14px rgba(0,0,0,.34),0 6px 14px rgba(0,0,0,.4);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease}
@media(min-width:768px){.di{min-height:46px;font-size:13.5px}}
.di>span{min-width:0}
.di::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .18s ease;
  background:radial-gradient(130% 100% at 50% 0%,rgba(255,224,150,.16),transparent 60%)}
.di:hover{transform:translateY(-1px) scale(1.03);border-color:rgba(255,215,95,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -7px 16px rgba(0,0,0,.38),0 10px 22px rgba(0,0,0,.5),0 0 20px rgba(245,188,52,.2)}
.di:hover::after{opacity:1}
.di:active{transform:scale(.95);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 -4px 10px rgba(0,0,0,.4),0 4px 10px rgba(0,0,0,.4)}
.di:focus-visible{outline:2px solid var(--app-gold-light);outline-offset:2px}
/* entrada em cascata: cada item da zoom+fade na sequencia */
.drawer.open .di{animation:diIn .34s cubic-bezier(.22,1,.36,1) both}
.drawer.open .di:nth-child(2){animation-delay:.03s}.drawer.open .di:nth-child(3){animation-delay:.06s}
.drawer.open .di:nth-child(4){animation-delay:.09s}.drawer.open .di:nth-child(5){animation-delay:.12s}
.drawer.open .di:nth-child(6){animation-delay:.15s}.drawer.open .di:nth-child(7){animation-delay:.18s}
.drawer.open .di:nth-child(8){animation-delay:.21s}.drawer.open .di:nth-child(9){animation-delay:.24s}
.drawer.open .di:nth-child(10){animation-delay:.27s}
@keyframes diIn{from{opacity:0;transform:translateY(9px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}
/* grupo de acoes (Cadastrar loja/vaga/curriculo, itens 2-4): borda dourada mais forte */
.dmenu .di:nth-child(2),.dmenu .di:nth-child(3),.dmenu .di:nth-child(4){border-color:rgba(255,215,95,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -8px 16px rgba(0,0,0,.38),0 8px 18px rgba(0,0,0,.45),0 0 0 1px rgba(255,215,95,.1)}
/* respiro separando acoes de conteudo */
.dmenu .di:nth-child(5){margin-top:11px}
/* CTA principal: Cadastrar anuncio — dourado com brilho varrendo */
.dmenu .di-cta{min-height:46px;font-size:13.5px;font-weight:800;letter-spacing:.2px;color:#fff;
  background:linear-gradient(180deg,#f2c14e 0%,#b87b11 48%,#5f3b08 100%);border:1px solid rgba(255,232,140,.75);text-shadow:0 1px 2px rgba(60,30,0,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -9px 18px rgba(70,38,0,.42),0 10px 24px rgba(0,0,0,.5),0 0 24px rgba(245,188,52,.32)}
@media(min-width:768px){.dmenu .di-cta{font-size:15px;min-height:50px}}
.dmenu .di-cta::before{content:'';position:absolute;top:-20%;bottom:-20%;width:46%;left:-70%;pointer-events:none;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);animation:ctaShine 3s ease-in-out infinite}
@keyframes ctaShine{0%,58%{left:-70%}88%,100%{left:135%}}
.dmenu .di-cta:hover{transform:translateY(-1px) scale(1.03);border-color:rgba(255,240,176,.95);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -9px 18px rgba(70,38,0,.5),0 14px 30px rgba(0,0,0,.55),0 0 30px rgba(245,188,52,.45)}
.dmenu .di-cta:active{transform:scale(.96)}
/* botao hamburguer: estado ativo quando o menu abre */
.goldbar .lanche.on{border-color:rgba(255,215,95,.9);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 20px -2px rgba(245,188,52,.55)}
.goldbar .lanche:active{transform:scale(.93)}

.body{max-width:100%;margin:0 auto;padding:16px 24px}
.body>*{margin-bottom:16px}
.goldbar .inner{max-width:100%;margin:0 auto;width:100%;display:flex;align-items:center;gap:12px}
@media(max-width:600px){.goldbar .inner .searchbar{flex:1;min-width:0;max-width:none}}
/* busca + mic radar */
.searchbar{flex:1;min-width:0;max-width:620px;margin:0 auto;display:flex;align-items:center;gap:10px;background:linear-gradient(180deg,rgba(24,20,13,.62),rgba(14,11,7,.78));backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);border:1.5px solid #EFC44E;border-radius:18px;padding:5px 6px 5px 16px;box-shadow:0 0 0 1px rgba(154,100,0,.4),0 0 10px -1px rgba(239,180,50,.75),inset 0 1px 0 rgba(255,240,176,.4),inset 0 -2px 4px rgba(0,0,0,.55);transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .22s ease,border-color .18s ease}
.searchbar input{flex:1;border:0;outline:0;background:transparent;font:inherit;font-size:16px;color:#f3e6c8}
.searchbar input::placeholder{color:#8a7a55}
.searchbar:focus-within{transform:scale(1.02);border-color:#FFE39A;box-shadow:0 0 0 1px rgba(239,180,50,.6),0 0 24px -1px rgba(239,180,50,.9),inset 0 1px 0 rgba(255,240,176,.55),inset 0 -2px 4px rgba(0,0,0,.5)}
.searchbar input:-webkit-autofill,.searchbar input:-webkit-autofill:hover,.searchbar input:-webkit-autofill:focus{-webkit-text-fill-color:#f3e6c8;-webkit-box-shadow:0 0 0 1000px transparent inset;caret-color:#f3e6c8;transition:background-color 600000s 0s,color 600000s 0s}
.searchbar .lupa{color:var(--gold);display:flex}.searchbar .lupa svg{width:19px;height:19px;fill:currentColor}
.micbtn{position:relative;width:46px;height:46px;flex:0 0 46px;border-radius:50%;background:none;display:flex;align-items:center;justify-content:center;color:#D9A441;cursor:pointer;box-shadow:none;animation:a19micidle 2.6s ease-in-out infinite}
.micbtn svg{width:22px;height:22px;position:relative;z-index:2;fill:currentColor}
.micbtn.rec{background:none;color:#F2CE7B;box-shadow:none}
.micbtn.rec::before,.micbtn.rec::after{display:none}.micbtn.rec::after{animation-delay:1.05s}
@media(max-width:600px){.micbtn{width:28px!important;height:28px!important;flex:0 0 28px!important}.micbtn svg{width:14px!important;height:14px!important}.micbtn::before,.micbtn::after{display:none}}
.go{background:linear-gradient(180deg,#c98f2a,#9a6400);color:#fff2d0;border:0;border-radius:12px;padding:10px 18px;font-weight:800;cursor:pointer;font-size:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
/* filtro de cidade estilo roleta (iOS wheel picker) — ao lado do microfone */
.cityrow{display:none}
.citybtn{position:relative;width:46px;height:46px;flex:0 0 46px;border-radius:50%;background:rgba(239,160,23,.12);border:1.5px solid rgba(239,160,23,.5);display:flex;align-items:center;justify-content:center;color:#EFA017;cursor:pointer;transition:transform .15s,background .15s}
.citybtn:hover{background:rgba(239,160,23,.22);transform:scale(1.05)}
.citybtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.citybtn.active{background:linear-gradient(135deg,#FFE39A,#EFA017 55%,#9a6400);border-color:transparent;color:#3a2600}
.citybtn .cbdot{position:absolute;top:-2px;right:-2px;width:12px;height:12px;border-radius:50%;background:#22c463;border:2px solid #0d0a06;display:none}
.citybtn.active .cbdot{display:block}
@media(max-width:600px){.citybtn{width:32px;height:32px;flex:0 0 32px}.citybtn svg{width:16px;height:16px}}

/* sheet do seletor de cidade */
#citysheet .dt{max-width:380px}
.csheet-hd{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 4px}
.csheet-hd h3{margin:0;font-size:17px;color:#ffe39a;font-weight:800}
.csheet-hd .close{width:32px;height:32px;border-radius:10px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px}
.csheet-search{margin:10px 20px 0;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:9px 12px}
.csheet-search svg{width:16px;height:16px;fill:none;stroke:#efe7d5;stroke-width:2;flex:0 0 auto}
.csheet-search input{flex:1;border:0;outline:0;background:transparent;color:#efe7d5;font:inherit;font-size:14px}
.csheet-search input::placeholder{color:#8a7f66}
.cwheel-wrap{position:relative;margin:14px 0}
.cwheel{position:relative;height:224px;overflow-y:auto;scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch;padding:92px 0;scrollbar-width:none;-ms-overflow-style:none;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 32%,#000 68%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 32%,#000 68%,transparent 100%)}
.cwheel::-webkit-scrollbar{display:none}
.cwheel-hl{position:absolute;left:16px;right:16px;top:50%;transform:translateY(-50%);height:40px;border-top:1.5px solid rgba(239,160,23,.45);border-bottom:1.5px solid rgba(239,160,23,.45);pointer-events:none;background:rgba(239,160,23,.07);border-radius:10px;z-index:2}
.cwheel-item{scroll-snap-align:center;height:40px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:15.5px;font-weight:600;color:#8a7f66;cursor:pointer;transition:color .12s;user-select:none;-webkit-user-select:none}
.cwheel-item b{font-weight:700;font-size:11px;color:#6b6152}
.cwheel-item.sel{color:#ffe39a;font-weight:800;font-size:19px}
.cwheel-item.sel b{color:#EFA017}
.csheet-foot{padding:6px 20px 22px}
.csheet-cta{width:100%;background:var(--goldgrad,linear-gradient(90deg,#9a6400,#EFA017));background-size:200% auto;border:0;border-radius:14px;padding:14px;font-weight:800;color:#3a2600;cursor:pointer;font-size:15px}

/* contador de resultados (badge dourado com brilho, reaproveita @keyframes shine de base.css) */
.kpi-badge{position:relative;overflow:hidden;display:inline-block;margin-left:6px;vertical-align:middle;padding:3px 13px;border-radius:999px;background:linear-gradient(135deg,#1b1200,#000);border:1px solid rgba(239,160,23,.5);box-shadow:0 0 12px -2px rgba(239,160,23,.5),inset 0 1px 0 rgba(255,224,150,.18)}
.kpi-badge b{position:relative;z-index:1;font-size:11.5px;font-weight:800;letter-spacing:.2px;background-image:linear-gradient(90deg,#7a5000 0%,#3a2600 15%,#EFA017 42%,#FFF6DC 52%,#EFA017 62%,#3a2600 85%,#7a5000 100%);background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 1px rgba(239,160,23,.45));animation:shine 8s linear infinite}
.kpi-badge::after{content:'';position:absolute;top:-30%;bottom:-30%;width:38%;left:-60%;pointer-events:none;transform:skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);animation:kpiSweep 9s ease-in-out infinite}
@keyframes kpiSweep{0%,62%{left:-60%}92%,100%{left:150%}}
@media(prefers-reduced-motion:reduce){.kpi-badge b{animation:none}.kpi-badge::after{animation:none;opacity:0}}

/* ===== SCROLLBAR APP019 — gradiente dourado do header, thumb arredondado, hover iluminado (2026-07-06 UI/UX) ===== */
html{scrollbar-width:thin;scrollbar-color:#c9961e rgba(120,80,0,.12)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:linear-gradient(180deg,rgba(120,80,0,.08),rgba(120,80,0,.14));border-radius:999px}
::-webkit-scrollbar-thumb{border-radius:999px;border:2px solid transparent;background-clip:padding-box;background-color:#c9961e;background-image:linear-gradient(180deg,#FFE39A 0%,#EFA017 40%,#9a6400 100%);box-shadow:inset 0 1px 0 rgba(255,240,176,.5)}
::-webkit-scrollbar-thumb:hover{background-image:linear-gradient(180deg,#FFF0C4 0%,#F7B72E 45%,#b87b11 100%)}
::-webkit-scrollbar-thumb:active{background-image:linear-gradient(180deg,#FFE39A,#EFA017)}
::-webkit-scrollbar-corner{background:transparent}

/* ===== A11y: foco visivel (teclado) + skip-link dourado (2026-07-06 UI/UX) ===== */
a:focus-visible,button:focus-visible,[role="button"]:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--app-gold-light,#ffd86b);outline-offset:2px;border-radius:6px}
#grid:focus{outline:none}
.skip-link{position:fixed;left:10px;top:10px;z-index:100;transform:translateY(-160%);background:linear-gradient(135deg,#150e00,#000);color:#ffd86b;padding:10px 16px;border-radius:12px;font-weight:800;font-size:13px;text-decoration:none;border:1px solid rgba(255,203,80,.55);box-shadow:0 8px 20px -6px rgba(0,0,0,.6);transition:transform .2s ease}
.skip-link:focus{transform:translateY(0)}
/* mic0711 */@keyframes a19micidle{0%,100%{opacity:.72;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}