/* Equipes de serviço no mapa (public/equipes.js): nome e balão sobre a cabeça, onomatopeias, chip da equipe no mapa e
   o botão Equipes do topo (só admin). Usa os tokens de estilo.css. */
.eq-nome { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 6px; border-radius: 999px;
  background: color-mix(in srgb, var(--painel) 92%, transparent); color: var(--tinta); font: 600 11.5px/1.2 var(--corpo);
  box-shadow: 0 2px 8px rgba(31, 27, 45, .12); white-space: nowrap; pointer-events: none; will-change: transform; }
.eq-nome i { width: 8px; height: 8px; border-radius: 3px; background: var(--eq-cor, var(--acento)); }

/* balão de fala: aparece crescendo da ponta, some esmaecendo */
.eq-balao { position: absolute; left: 0; top: 0; max-width: 210px; padding: 7px 11px; border-radius: 14px; background: #FFFFFF; color: #1F1B2D;
  font: 500 12.5px/1.3 var(--corpo); box-shadow: 0 4px 14px rgba(31, 27, 45, .18); pointer-events: none; will-change: transform;
  width: max-content; text-wrap: balance; opacity: 0; transition: opacity .18s; }
.eq-balao::after { content: ""; position: absolute; left: calc(50% + var(--cauda, 0px)); bottom: -6px; width: 12px; height: 12px; margin-left: -6px; background: inherit; transform: rotate(45deg); border-radius: 0 0 3px 0; }
/* sem espaço em cima, o balão vai para o lado do nome (posicionar, em equipes.js) e a ponta vira para ele */
.eq-balao:is([data-lado="dir"], [data-lado="esq"])::after { top: calc(50% + var(--cauda, 0px)); bottom: auto; margin: -6px 0 0; }
.eq-balao[data-lado="dir"]::after { left: -6px; border-radius: 0 0 0 3px; }
.eq-balao[data-lado="esq"]::after { left: auto; right: -6px; border-radius: 0 3px 0 0; }
.eq-balao.on { opacity: 1; animation: eq-balao .28s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes eq-balao { from { scale: .6; } to { scale: 1; } }

/* barulho da ferramenta: sobe girado e some */
.eq-som { position: absolute; pointer-events: none; font: 700 15px/1 var(--titulo); color: #FFFFFF; letter-spacing: .02em;
  -webkit-text-stroke: 4px #33313F; paint-order: stroke fill; white-space: nowrap; transform: translate(-50%, -50%) rotate(var(--giro, 0deg));
  animation: eq-som 1s ease-out forwards; }
@keyframes eq-som {
  0% { opacity: 0; translate: 0 6px; scale: .7; }
  15% { opacity: 1; scale: 1.1; }
  100% { opacity: 0; translate: 0 -34px; scale: 1; }
}

/* alerta da pane (a manutenção mexeu no modem ou no ar): triângulo amarelo pulando sobre a cabeça */
.eq-alerta { position: absolute; left: 0; top: 0; width: 34px; height: 31px; pointer-events: none; will-change: transform;
  filter: drop-shadow(0 2px 4px rgba(31, 27, 45, .3)); animation: eq-alerta-entra .3s cubic-bezier(.3, 1.6, .5, 1); }
.eq-alerta svg { display: block; width: 100%; height: 100%; transform-origin: 50% 100%; animation: eq-alerta .45s ease-in-out infinite alternate; }
@keyframes eq-alerta-entra { from { scale: .3; } to { scale: 1; } }
@keyframes eq-alerta { from { translate: 0 0; scale: 1; } to { translate: 0 -6px; scale: 1.1; } }

/* chip da equipe no mapa, no canto de cima à esquerda (o da direita é o da primeira pessoa) */
.eq-chip { position: absolute; top: calc(12px + var(--sob-palco-lados, 0px)); left: 14px; z-index: 2; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 28px);
  padding: 5px 5px 5px 7px; border: 1px solid var(--linha); border-radius: 999px; background: color-mix(in srgb, var(--painel) 94%, transparent);
  color: var(--tinta); box-shadow: 0 2px 10px rgba(31, 27, 45, .12); font: 500 13px/1.2 var(--corpo); }
.eq-chip-icone { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--eq-cor); color: #fff; }
.eq-chip-icone svg { width: 16px; height: 16px; }
.eq-chip-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eq-chip-txt span { color: var(--suave); }
.eq-chip-botao { flex: none; height: 30px; padding: 0 12px; border: 1px solid var(--linha); border-radius: 999px; background: var(--painel); color: var(--tinta);
  font: 600 12.5px/1 var(--corpo); cursor: pointer; }
.eq-chip-botao:hover:not(:disabled) { background: var(--acento-suave); }
.eq-chip-botao:disabled { opacity: .5; cursor: default; }
.eq-chip-botao:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
/* o botão da estação (public/estacao.css) mora no mesmo canto: com ele à vista, a equipe desce uma linha */
#mapa:has(.est-chip:not([hidden])) .eq-chip { top: calc(56px + var(--sob-palco-lados, 0px)); }
@media (max-width: 760px) { .eq-chip { top: calc(56px + var(--sob-palco-lados, 0px)); } }

.eq-so-leitor { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* botão Equipes, ao lado do Admin (o botão usa .esc-admin, de admin.css), e o painel que ele abre */
.eq-menu { position: relative; }
.eq-menu .esc-admin { position: relative; }
.eq-menu .esc-admin[aria-expanded="true"] { background: var(--acento-suave); }
.eq-menu-ativa { position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--painel); }
.eq-menu-painel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: 360px; max-height: calc(100dvh - 90px); overflow-y: auto; padding: 14px 16px;
  border: 1px solid var(--linha); border-radius: 16px; background: var(--painel); color: var(--tinta); box-shadow: 0 18px 44px -12px rgba(31, 27, 45, .3); }
.eq-menu-titulo { margin: 0; font: 500 11px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--suave); }
.eq-menu-nota { margin: 8px 0 12px; font-size: 12.5px; color: var(--suave); }
.eq-lista { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.eq-item { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--linha); border-left: 4px solid var(--eq-cor); border-radius: 12px; }
.eq-item-icone { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--eq-cor); color: #fff; }
.eq-item-icone svg { width: 18px; height: 18px; }
.eq-item-txt { flex: 1; min-width: 0; display: grid; gap: 1px; font-size: 12.5px; color: var(--suave); }
.eq-item-txt strong { font: 600 14px/1.25 var(--corpo); color: var(--tinta); }
.eq-item-txt .eq-membros { color: var(--tinta); }
.eq-item-botao { flex: none; height: 32px; padding: 0 12px; border: 1px solid var(--acento); border-radius: 10px; background: var(--acento); color: var(--no-acento);
  font: 600 13px/1 var(--corpo); cursor: pointer; }
.eq-item-botao:hover:not(:disabled) { filter: brightness(1.08); }
.eq-item-botao.embora { background: var(--painel); border-color: var(--linha); color: var(--tinta); }
.eq-item-botao.embora:hover { background: var(--acento-suave); filter: none; }
.eq-item-botao:disabled { opacity: .45; cursor: default; }
.eq-item-botao:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.eq-menu-estado { margin: 10px 0 0; font-size: 12.5px; color: var(--tinta); }
.eq-menu-estado:empty { display: none; }
@media (max-width: 560px) { .eq-menu-painel { position: fixed; left: 16px; right: 16px; top: 64px; width: auto; } }
@media (prefers-reduced-motion: reduce) {
  .eq-balao.on { animation: none; }
  .eq-som { animation-duration: 1.4s; animation-name: eq-som-calmo; }
  .eq-alerta, .eq-alerta svg { animation: none; }
  @keyframes eq-som-calmo { 0%, 100% { opacity: 0; } 20%, 80% { opacity: 1; } }
}
.eq-ia { margin: 10px 0 0; color: var(--suave); font-size: 12px; }
.eq-ia:empty { display: none; }