/* 1.61.7: faixa vermelha fixa e card de resposta das ações do cliente (web/acoes-cliente.js). */
#acao-faixa{position:fixed;top:0;left:0;right:0;z-index:1250;min-height:48px;display:flex;align-items:center;gap:10px;padding:6px 12px;background:#D92D20;color:#fff;box-shadow:0 4px 18px rgba(120,20,10,.35);font-size:calc(14px * var(--dt,1))}
#acao-faixa[hidden]{display:none}
#acao-faixa .af-icone{flex:none;width:26px;height:26px;border-radius:50%;background:#fff;color:#D92D20;font-weight:800;display:grid;place-items:center}
#acao-faixa .af-textos{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
#acao-faixa .af-item{all:unset;cursor:pointer;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
#acao-faixa .af-item span{opacity:.9} #acao-faixa .af-item em{font-style:normal;font-weight:700;margin-left:4px;font-variant-numeric:tabular-nums}
#acao-faixa .af-mais{font-weight:700;opacity:.9}
#acao-faixa .af-responder{flex:none;border:0;border-radius:999px;background:#fff;color:#B42318;font-weight:700;padding:9px 16px;font-size:inherit;cursor:pointer}
body.tem-acao-cliente{padding-top:56px}
body.tem-acao-cliente .top{top:58px}
html.app-nativo #acao-faixa{top:var(--topo-app);left:10px;right:10px;border-radius:16px}
html.app-nativo body.tem-acao-cliente{padding-top:calc(var(--topo-app) + 60px)!important}
html.app-nativo body.tem-acao-cliente:has(#view-exp.on) main{top:calc(var(--topo-app) + 60px)}

#acao-card-fundo{position:fixed;inset:0;z-index:1400;background:rgba(20,15,10,.45);display:flex;align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom))}
#acao-card-fundo[hidden]{display:none}
/* 1.62.1: o card é uma coluna: topo e prazo fixos, corpo que rola por dentro e rodapé fixo com os botões. Antes o card
   inteiro rolava e, no iPhone, os botões (no fim) ficavam atrás da barra de abas nativa. */
#acao-card{width:min(560px,100%);max-height:100%;display:flex;flex-direction:column;overflow:hidden;background:var(--page,#fff);color:var(--text,#3A2A1E);border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,.35);border-top:6px solid #D92D20;box-sizing:border-box}
#acao-card>.ac-topo,#acao-card>.ac-prazo{flex:none}
/* no app: 1.72.0 (auditoria de design 1720) as peças nativas somem com o card aberto (web/folha.js esconde a barra para
   toda folha registrada), então o card é a folha de baixo, como no navegador do celular: começa abaixo da barra de status
   (--folha-topo, web/folha.css) e os botões do rodapé ficam acima do indicador de início */
html.app-nativo #acao-card-fundo{align-items:flex-end;padding:var(--folha-topo,calc(env(safe-area-inset-top) + 10px)) 0 0}
html.app-nativo #acao-card{width:100%;border-radius:22px 22px 0 0;padding-bottom:env(safe-area-inset-bottom,0px)}
/* no app a faixa vermelha fica logo abaixo dos botões do topo, exatamente onde o card começa: com o card aberto ela sai de cena */
html.app-nativo body:has(#acao-card-fundo:not([hidden])) #acao-faixa{visibility:hidden}
html.app-ios body.tem-acao-cliente:has(#acao-card-fundo:not([hidden])) .toasts{top:calc(var(--topo-app) + 4px)}
/* os avisos (senha errada, escolha uma resposta) aparecem por cima do véu do card, não atrás dele */
body.acao-card-aberto .toasts{z-index:1450!important}
body.dark #acao-card{background:#2C2622;color:#F4ECE4}
#acao-card .ac-topo{display:flex;align-items:flex-start;gap:12px;padding:16px 18px 6px}
#acao-card .ac-topo>div{flex:1;min-width:0} #acao-card h2{margin:0;font-size:calc(19px * var(--dt,1))}
#acao-card .ac-x{border:0;background:transparent;font-size:calc(28px * var(--dt,1));line-height:1;color:var(--sub,#8A7666);cursor:pointer;padding:0 4px}
#acao-card .ac-sub{color:var(--sub,#8A7666);margin:2px 0 0;font-size:calc(13px * var(--dt,1))}
#acao-card .ac-prazo{margin:6px 18px 0;padding:10px 12px;border-radius:12px;background:rgba(217,45,32,.1);color:var(--ink-red,#B42318);font-size:calc(14px * var(--dt,1))}
#acao-card .ac-prazo b{font-variant-numeric:tabular-nums}
#acao-card .ac-corpo{padding:10px 18px 18px;flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;position:relative}
#acao-card .ac-msg{font-size:calc(16px * var(--dt,1));margin:4px 0 10px}
#acao-card .ac-fotos .foto-mini{width:116px;height:130px}
#acao-card .ac-laudo{border:1px solid var(--hair,rgba(58,42,30,.12));border-radius:12px;padding:10px 12px;margin:8px 0;font-size:calc(14px * var(--dt,1))}
#acao-card .ac-laudo p{margin:6px 0 0}
#acao-card .ac-fatos{font-size:calc(13px * var(--dt,1));color:var(--sub,#8A7666)}
#acao-card .ac-alerta{background:rgba(245,144,27,.14);border-radius:10px;padding:8px 10px;font-size:calc(13px * var(--dt,1))}
#acao-card .ac-h3{font-size:calc(15px * var(--dt,1));margin:14px 0 8px}
#acao-card .ac-presets{display:flex;flex-direction:column;gap:8px}
#acao-card .ac-preset{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--hair,rgba(58,42,30,.14));border-radius:12px;padding:10px 12px;cursor:pointer;font-size:calc(14px * var(--dt,1));line-height:1.35}
#acao-card .ac-preset:has(input:checked){border-color:#D92D20;background:rgba(217,45,32,.06)}
#acao-card .ac-preset.cerebro b{color:var(--ink-red,#B42318)}
#acao-card .ac-preset input{margin-top:3px;flex:none}
#acao-card .ac-preset span{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
#acao-card .ac-preset textarea,#acao-card #ac-pin,#acao-card #ac-valor{width:100%;box-sizing:border-box;border:1px solid var(--hair,rgba(58,42,30,.2));border-radius:10px;padding:10px;font:inherit;background:transparent;color:inherit}
#acao-card .ac-acoes{flex:none;display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;margin:0;padding:12px 18px 16px;border-top:1px solid var(--hair,rgba(58,42,30,.12));background:inherit;border-radius:0 0 20px 20px}
#acao-card .ac-acoes .btn{min-height:44px}
html.app-nativo #acao-card .ac-acoes{padding:12px 14px 14px}
html.app-nativo #acao-card .ac-acoes .btn{flex:1 1 auto}
#acao-card .ac-acoes .btn.is-loading{opacity:.75}
#acao-card .ac-carregando{padding:30px 18px;text-align:center;color:var(--sub,#8A7666)}
body.acao-card-aberto{overflow:hidden}

/* ---------- 1.62.1: miniaturas das fotos do cliente (card de ação, ficha do pedido) ---------- */
.fotos-cliente{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px;margin:8px 0 10px;-webkit-overflow-scrolling:touch}
.fotos-cliente .foto-mini{flex:none;position:relative;display:block;width:104px;height:104px;padding:0;margin:0;border:0;border-radius:12px;overflow:hidden;cursor:zoom-in;background:var(--fill,rgba(58,42,30,.08));box-shadow:inset 0 0 0 1px var(--sep,rgba(58,42,30,.14));font:inherit;color:inherit;transition:transform var(--dur-rapida,.12s),opacity var(--dur-rapida,.12s);-webkit-tap-highlight-color:transparent}
.fotos-cliente .foto-mini img{display:block;width:100%;height:100%;object-fit:cover;border:0;border-radius:0;background:transparent}
.fotos-cliente .foto-mini:active{transform:scale(.96);opacity:.8}
.fotos-cliente .foto-mini:focus-visible{outline:3px solid var(--foco-cor,#1861A0);outline-offset:2px}
.fotos-cliente .foto-mini.carregando::after{content:"";position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;border:2px solid rgba(120,110,100,.25);border-top-color:var(--sub,#8A7666);animation:hf-gira .8s linear infinite}
.fotos-cliente .foto-mini.falhou::after{content:"Foto indisponível. Toque para tentar de novo.";position:absolute;inset:0;display:grid;place-items:center;padding:8px;text-align:center;font-size:var(--f-caption1,12px);line-height:1.25;color:var(--sub,#8A7666)}

/* ---------- 1.62.1: VISUALIZADOR DE FOTOS (window.HubFotos) ----------
   Vidro escuro em tela cheia, por cima de tudo (a ficha, o card de ação e, no app, os botões nativos, que somem enquanto
   ele está aberto). A foto aparece inteira; a barra de cima tem o contador e o X de 44 px. */
.hub-fotos{position:fixed;inset:0;z-index:2400;color:#fff;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;overscroll-behavior:contain}
.hub-fotos[hidden]{display:none}
.hub-fotos .hf-fundo{position:absolute;inset:0;background:rgba(14,10,8,.82);-webkit-backdrop-filter:blur(30px) saturate(140%);backdrop-filter:blur(30px) saturate(140%);opacity:0;transition:opacity .22s var(--curva-padrao,ease)}
.hub-fotos.aberto .hf-fundo{opacity:1}
.hub-fotos .hf-palco{position:absolute;inset:0;opacity:0;transform:scale(.94);transition:transform .3s var(--curva-mola,cubic-bezier(.2,1.25,.35,1)),opacity .2s linear}
.hub-fotos.aberto .hf-palco{opacity:1;transform:none}
.hub-fotos.saindo .hf-palco{transition:transform .26s var(--curva-padrao,ease),opacity .2s linear}
.hub-fotos.arrastando .hf-palco,.hub-fotos.arrastando .hf-fundo{transition:none}
.hub-fotos .hf-trilho{position:absolute;inset:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;touch-action:pan-x;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.hub-fotos .hf-trilho::-webkit-scrollbar{display:none}
.hub-fotos .hf-trilho.ampliando{overflow:hidden}
.hub-fotos .hf-foto{flex:0 0 100%;width:100%;height:100%;margin:0;position:relative;scroll-snap-align:center;scroll-snap-stop:always;overflow:hidden}
.hub-fotos .hf-zoom{box-sizing:border-box;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:calc(var(--app-status,0px) + 60px) 10px calc(env(safe-area-inset-bottom) + 64px)}
.hub-fotos .hf-zoom img{display:block;max-width:100%;max-height:100%;object-fit:contain;border-radius:6px;-webkit-user-drag:none}
.hub-fotos .hf-zoom img:not([src]){visibility:hidden}
.hub-fotos .hf-foto.ampliada{overflow:auto;touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch}
.hub-fotos .hf-foto.ampliada .hf-zoom{width:max-content;height:max-content;min-width:100%;min-height:100%;padding:0}
.hub-fotos .hf-foto.ampliada .hf-zoom img{max-width:none;max-height:none;border-radius:0}
.hub-fotos .hf-girando{display:none;position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;border:3px solid rgba(255,255,255,.22);border-top-color:#fff;animation:hf-gira .8s linear infinite}
.hub-fotos .hf-foto.carregando .hf-girando{display:block}
.hub-fotos .hf-erro{position:absolute;left:24px;right:24px;top:50%;transform:translateY(-50%);text-align:center;font-size:var(--f-body,17px);line-height:1.4;color:rgba(255,255,255,.86)}
.hub-fotos .hf-erro[hidden]{display:none}
@keyframes hf-gira{to{transform:rotate(360deg)}}
.hub-fotos .hf-barra{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;justify-content:center;min-height:44px;padding:calc(var(--app-status,0px) + 8px) 12px 8px;pointer-events:none;opacity:0;transition:opacity .2s linear}
.hub-fotos.aberto .hf-barra{opacity:1}
.hub-fotos.ampliando .hf-barra,.hub-fotos.arrastando .hf-barra,.hub-fotos.ampliando .hf-dica,.hub-fotos.arrastando .hf-dica{opacity:0}
.hub-fotos .hf-contador{padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:inset 0 1px 0 rgba(255,255,255,.22);font-weight:600;font-size:var(--f-subhead,15px);font-variant-numeric:tabular-nums}
.hub-fotos.uma .hf-contador{visibility:hidden}
.hub-fotos .hf-x{position:absolute;right:12px;top:calc(var(--app-status,0px) + 8px);pointer-events:auto;width:44px;height:44px;border-radius:50%;border:0;padding:0;display:grid;place-items:center;color:#fff;cursor:pointer;background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 14px rgba(0,0,0,.25);transition:transform var(--dur-rapida,.12s),background-color var(--dur-rapida,.12s)}
.hub-fotos .hf-x svg,.hub-fotos .hf-seta svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.hub-fotos .hf-x:active,.hub-fotos .hf-seta:not(:disabled):active{transform:scale(.92);background:rgba(255,255,255,.28)}
.hub-fotos .hf-x:focus-visible,.hub-fotos .hf-seta:focus-visible{outline:3px solid #fff;outline-offset:3px}
.hub-fotos .hf-seta{position:absolute;top:50%;margin-top:-26px;width:52px;height:52px;border-radius:50%;border:0;padding:0;display:none;place-items:center;color:#fff;cursor:pointer;background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3);transition:transform var(--dur-rapida,.12s),opacity .2s}
.hub-fotos .hf-seta:disabled{opacity:.3;cursor:default}
.hub-fotos .hf-ant{left:16px} .hub-fotos .hf-prox{right:16px}
@media (hover:hover) and (pointer:fine){.hub-fotos:not(.uma) .hf-seta{display:grid}}
.hub-fotos .hf-dica{position:absolute;left:16px;right:16px;bottom:calc(env(safe-area-inset-bottom) + 16px);margin:0;text-align:center;font-size:var(--f-footnote,13px);color:rgba(255,255,255,.72);pointer-events:none;opacity:0;transition:opacity .2s linear}
.hub-fotos.aberto .hf-dica{opacity:1}
.hub-fotos .hf-dica-mouse{display:none}
@media (hover:hover) and (pointer:fine){.hub-fotos .hf-dica-toque{display:none}.hub-fotos .hf-dica-mouse{display:inline}}
html.fotos-abertas,html.fotos-abertas body{overflow:hidden}
@media (prefers-reduced-transparency:reduce){.hub-fotos .hf-fundo{background:#0E0A08;-webkit-backdrop-filter:none;backdrop-filter:none}}
/* 1.68.2: assumir o chamado. Quem assumiu vê a própria tratativa (e pode devolver); os outros veem o comunicado. */
#acao-faixa.so-tratativa{background:#B54708}
#acao-faixa .af-dono{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;background:rgba(255,255,255,.22);font-weight:600;font-size:var(--f-caption1,max(11px, calc(12px * var(--dt,1))))}
#acao-card>.ac-tratativa{flex:none}
#acao-card .ac-tratativa{margin:8px 18px 0;padding:10px 12px;border-radius:12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:calc(14px * var(--dt,1));line-height:1.35}
#acao-card .ac-tratativa p{margin:0;flex:1 1 220px}
#acao-card .ac-tratativa.meu{background:rgba(18,183,106,.13)}
#acao-card .ac-tratativa.ocupado,#acao-card .ac-tratativa.expirou,#acao-card .ac-tratativa.prazo{background:rgba(245,144,27,.18)}
#acao-card .ac-tratativa.ocupado{display:block}
#acao-card .ac-tratativa.ocupado b{display:block;margin-bottom:2px}
#acao-card .ac-link{border:0;background:transparent;color:var(--ink-red,#B42318);font-weight:600;text-decoration:underline;cursor:pointer;padding:4px 2px;font-size:inherit}
body.dark #acao-card .ac-link{color:#FDA29B}