/* Aba Escritório (mesmo arquivo no PC e no celular; pwa/escritorio/ é cópia). Cores pelas
   variáveis do tema quando existem (--text, --text-2, --alerta), com valores de reserva. */

.esc {
  position: relative; display: flex; flex-direction: column; gap: 12px;
  width: 100%; height: 100%; min-height: 0;
  --esc-ocioso: #8b93a7;
  --esc-andando: #5ee0ff;
  --esc-trabalhando: #4ade80;
  --esc-aguardando: var(--alerta, #ffa726);
}
.esc-palco {
  position: relative; flex: 1 1 auto; min-height: 180px;
  border-radius: 14px; overflow: hidden; background: #0b0d14;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.esc-palco canvas { image-rendering: pixelated; image-rendering: crisp-edges; }

.esc-equipe {
  list-style: none; display: grid; gap: 8px; margin: 0; padding: 0;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.esc-equipe button {
  display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center;
  width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; text-align: left; cursor: pointer;
  font: inherit; color: var(--text, #fff); background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.esc-equipe button:hover { background: rgba(255, 255, 255, 0.09); }
.esc-equipe li.sel button { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45); }
.esc-equipe b { font-weight: 600; font-size: 13px; }
.esc-sub { grid-column: 2; font-size: 11.5px; color: var(--text-2, rgba(255, 255, 255, 0.6)); }

.esc-ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--esc-ocioso); }
[data-estado="andando"] .esc-ponto { background: var(--esc-andando); }
[data-estado="trabalhando"] .esc-ponto { background: var(--esc-trabalhando); }
[data-estado="aguardando_aprovacao"] .esc-ponto { background: var(--esc-aguardando); animation: esc-pisca 1.2s ease-in-out infinite; }
@keyframes esc-pisca { 50% { opacity: 0.35; } }

.esc-ficha {
  position: absolute; top: 12px; right: 12px; width: min(280px, calc(100% - 24px));
  padding: 14px 16px 16px; border-radius: 14px;
  color: var(--text, #fff); background: rgba(12, 15, 24, 0.92);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(8px);
}
.esc-ficha[hidden] { display: none; }
.esc-fechar {
  position: absolute; top: 6px; right: 8px; width: 28px; height: 28px; border: 0; border-radius: 8px;
  font-size: 20px; line-height: 1; color: var(--text-2, rgba(255, 255, 255, 0.6)); background: transparent; cursor: pointer;
}
.esc-fechar:hover { background: rgba(255, 255, 255, 0.08); }
.esc-ficha-nome { font-size: 16px; font-weight: 650; }
.esc-ficha-cargo { font-size: 12px; color: var(--text-2, rgba(255, 255, 255, 0.6)); margin-top: 2px; }
.esc-ficha-estado { display: flex; align-items: center; gap: 7px; margin-top: 12px; font-size: 13px; font-weight: 550; }
.esc-ficha-setor { font-size: 12px; color: var(--text-2, rgba(255, 255, 255, 0.6)); margin-top: 3px; padding-left: 15px; }
.esc-ficha-tarefa { margin: 12px 0 0; font-size: 13.5px; line-height: 1.45; }
.esc-ficha-tarefa.vazia { color: var(--text-3, rgba(255, 255, 255, 0.4)); }

/* Celular: a ficha vai para baixo da cena (por cima, cobriria a cena inteira). */
@media (max-width: 560px) {
  .esc-ficha { position: relative; top: auto; right: auto; width: auto; order: 1; backdrop-filter: none; }
  .esc-equipe { order: 2; }
}