/* Quem Faz - os vídeos de 25 s do Destaque (videos.js): a fileira de bolinhas da página do Quem Faz,
   o tocador de tela cheia, o "Ver o vídeo" do anúncio aberto e o vídeo na janela do Destaque.
   Carrega no app (index.html) e na página da porta (abertura_quemfaz.py), que não tem o resto do
   visual do app: aqui só entram cores escritas por extenso. */

/* A fileira (página da porta, sobre o anil) */
.qfv-fila{margin:0 0 20px;max-width:520px}
.qfv-fila-tit{margin:0 0 10px;font-size:14.5px;font-weight:800;letter-spacing:.2px}
.qfv-fila-tit small{font-weight:600;opacity:.78;font-size:13px}
.qfv-fila-lista{display:flex;gap:14px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.qfv-fila-lista::-webkit-scrollbar{display:none}
.qfv-bola{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;width:76px;padding:0;border:0;
background:none;color:inherit;font:inherit;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.qfv-anel{display:block;width:72px;height:72px;border-radius:50%;padding:3px;
background:conic-gradient(from 210deg,#FFD43B,#FF8A3D,#E5322D,#FFD43B)}
.qfv-bola.visto .qfv-anel{background:rgba(255,255,255,.45)}
.qfv-bola:active .qfv-anel{transform:scale(.94)}
.qfv-foto{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;overflow:hidden;
border:3px solid var(--ent-cor,#2B3FD6);background:#E8EBFF;color:#2B3FD6;font-weight:900;font-size:24px}
.qfv-foto img{width:100%;height:100%;object-fit:cover}
.qfv-nome{max-width:76px;font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qfv-bola.convite .qfv-anel{background:none;border:2px dashed rgba(255,255,255,.75)}
.qfv-bola.convite .qfv-foto{border-color:transparent;background:rgba(255,255,255,.14);color:#fff;font-size:30px;font-weight:700}
.qfv-bola.convite .qfv-nome{white-space:normal;line-height:1.15;text-align:center}

/* Na busca da página, quem tem vídeo ganha o anel e o ▶ na foto (abertura_quemfaz_busca.py) */
.qf-card .av.tem-video{position:relative;overflow:visible;cursor:pointer;box-shadow:0 0 0 2px #fff,0 0 0 4.5px #FF8A3D}
.qf-card .av.tem-video img{border-radius:50%}
.qf-card .av.tem-video::after{content:"▶";position:absolute;right:-6px;bottom:-5px;display:grid;place-items:center;width:20px;
height:20px;border-radius:50%;border:2px solid #fff;background:#E5322D;color:#fff;font-size:8px}

/* O tocador de tela cheia */
html.qfv-preso,html.qfv-preso body{overflow:hidden}
.qfv{position:fixed;inset:0;z-index:2147483000;display:none;flex-direction:column;background:#070B26;color:#fff;
font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;line-height:1.3}
.qfv.aberto{display:flex;animation:qfv-entra .2s ease-out}
@keyframes qfv-entra{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
.qfv-cab,.qfv-pe{width:100%;max-width:560px;margin:0 auto}
.qfv-cab{padding:calc(10px + env(safe-area-inset-top)) 12px 8px}
.qfv-barras{display:flex;gap:4px;margin-bottom:10px}
.qfv-barras i{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.28);overflow:hidden}
.qfv-barras b{display:block;height:100%;width:0;background:#fff}
.qfv-quem{display:flex;align-items:center;gap:10px}
.qfv-av{flex:none;width:40px;height:40px}
.qfv-av-in{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;overflow:hidden;background:#E8EBFF;
color:#2B3FD6;font-weight:900}
.qfv-av-in img{width:100%;height:100%;object-fit:cover}
.qfv-tx{flex:1;min-width:0}
.qfv-tx b,.qfv-tx small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qfv-tx b{font-size:15.5px}
.qfv-tx small{opacity:.75;font-size:13px}
.qfv-som,.qfv-x{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:0;
background:rgba(255,255,255,.13);color:#fff;font-size:17px;cursor:pointer}
.qfv-palco{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 10px}
.qfv-palco video{display:block;height:100%;max-width:100%;aspect-ratio:9/16;object-fit:contain;border-radius:16px;background:transparent}
.qfv-toque{position:absolute;z-index:1;top:0;bottom:0;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
-webkit-user-select:none;user-select:none}
.qfv-toque.ant{left:0;width:30%}
.qfv-toque.prox{right:0;width:70%}
.qfv-tocar{position:absolute;z-index:2;width:78px;height:78px;border-radius:50%;border:0;background:rgba(255,255,255,.92);
color:#2B3FD6;font-size:30px;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.qfv-pe{display:flex;gap:10px;padding:12px 12px calc(14px + env(safe-area-inset-bottom))}
.qfv-zap,.qfv-ver{display:flex;align-items:center;justify-content:center;min-height:50px;padding:0 12px;border-radius:14px;
font-weight:800;font-size:15.5px;text-align:center;text-decoration:none}
.qfv-zap{flex:1.5;background:#1FA855;color:#fff}
.qfv-ver{flex:1;border:1.5px solid rgba(255,255,255,.55);color:#fff}
.qfv [hidden]{display:none!important}

/* O "Ver o vídeo" do anúncio aberto, no app (app-busca.js) */
.qfv-botao{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;margin:14px 0 2px;
border-radius:14px;background:linear-gradient(90deg,#FFE14A,#FFB13D);color:#141B45;font-weight:800;font-size:15.5px}

/* O vídeo na janela do Destaque (app-destaque.js) */
.dest-video{margin:14px 0 10px;padding:14px;border-radius:14px;background:#EEF0F5;text-align:center}
.dest-video h3{margin:0 0 10px;font-size:16px}
.dest-esc{margin:0 0 12px;padding:14px;border-radius:14px;background:#FFF8D6}
/* os botões do vídeo (09/11/2026, video_escolhas.py): efeito, cor e música */
.dest-grupo{margin:12px 0 6px;font-weight:700;font-size:14px}.dest-grupo span{font-weight:400;color:var(--tinta-2)}
.dest-chips{display:flex;flex-wrap:wrap;gap:8px}
.dest-chip{min-height:40px;padding:7px 12px;border-radius:999px;border:1.5px solid #D7DBE7;background:#fff;color:var(--tinta);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.dest-chip.sel{border-color:#2B3FD6;background:#2B3FD6;color:#fff}
.dest-cores{display:flex;flex-wrap:wrap;gap:10px}
.dest-cor{width:42px;height:42px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1.5px #D7DBE7;cursor:pointer}
.dest-cor.sel{box-shadow:0 0 0 3px #2B3FD6}
.dest-cor{color:#fff;font-weight:800;font-size:15px;padding:0}.dest-cor.clara{color:#141B45}
.dest-esc>.primario{margin-top:16px}
.dest-sua{display:block;width:100%;box-sizing:border-box;margin:10px 0 0;padding:10px 12px;border:1px solid #D7DBE7;border-radius:12px;font:inherit;font-size:15px}
.dest-esc h3{margin:0 0 4px;font-size:16px}
.dest-esc .primario{width:100%}
#dest-esc-previa video{display:block;margin:14px auto 10px;width:100%;max-width:210px;aspect-ratio:9/16;border-radius:14px;background:#000}
.dest-tirar{display:block;margin:12px auto 0;font-size:13.5px}
.dest-previa-tit{margin:14px 0 0;font-weight:700;font-size:14px;text-align:center}
.dest-video video{display:block;margin:0 auto;width:100%;max-width:210px;aspect-ratio:9/16;border-radius:14px;background:#000}
.dest-video .botoes{display:flex;gap:8px;margin-top:12px}
.dest-video .botoes>*{flex:1;height:46px;text-decoration:none}
.dest-video .montando{display:grid;place-items:center;gap:8px;min-height:120px;color:#4B5277;font-size:14px}
.dest-video .montando i{width:30px;height:30px;border-radius:50%;border:3px solid #D7DBE7;border-top-color:#2B3FD6;
animation:qfv-gira 1s linear infinite}
@keyframes qfv-gira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.qfv.aberto,.dest-video .montando i{animation:none}}
.topo .qfv-fila{margin:12px 0 14px}