/* Hemiciclo 2D: a planta do plenário vista de cima (docs/04, "A planta 2D"), desenhada pelo componentes/hemiciclo.js.
   É a mesma sala do 3D, nas cores das fotos: a Câmara com o carpete claro, as bancadas de madeira mel e a parede de
   tubos com os quadrados verdes e amarelos; o Senado com o carpete azul, as mesas de madeira avermelhada e os tubos
   prateados. Como a sala do 3D, a planta é a mesma nos dois temas. Cada cadeira: a cor do partido em repouso (a paleta
   mora no base.css) e a do voto durante a votação; sem ninguém, a cor da Casa. A planta é em metros, e os contornos
   das cadeiras (vector-effect) ficam em pixels, em qualquer tamanho. */

.hemiciclo {
  --hemiciclo-galeria: #2a2824;
  --hemiciclo-degrau: #3b3833;
  --hemiciclo-publico: #45413a;
  --hemiciclo-corredor: #2a2824;
  --hemiciclo-piso: #aaa48f;
  --hemiciclo-borda-do-carpete: #8f8a76;
  --hemiciclo-microfone: #1b1c1e;
  --hemiciclo-muro: #c98d3a;
  --hemiciclo-parede: #4a3526;
  --hemiciclo-painel: #4f7bff;
  --hemiciclo-plataforma: #cbbd9a;
  --hemiciclo-rampa: #b5a780;
  --hemiciclo-nicho: #5a5448;
  --hemiciclo-madeira: #cf933f;
  --hemiciclo-bancada: #c98d3a;
  --hemiciclo-borda-da-bancada: #7d4f1b;
  --hemiciclo-terminal: #1d1f22;
  --hemiciclo-frente-da-mesa: #1d1d1f;
  --hemiciclo-fundo-dos-tubos: #141414;
  --hemiciclo-tubo: #cfc2a6;
  --hemiciclo-verde: #1fa65a;
  --hemiciclo-amarelo: #f2c81d;
  --hemiciclo-bandeira: #e9c84a;
  --hemiciclo-cadeira: #2b2c30; /* sem ninguém: o couro preto da Câmara */
  --hemiciclo-contorno: rgb(0 0 0 / 0.42);
  --hemiciclo-vazia: rgb(0 0 0 / 0.55); /* o contorno da cadeira de quem faltou */

  position: relative;
  width: 100%;
}

.hemiciclo--senado {
  --hemiciclo-galeria: #121f47;
  --hemiciclo-degrau: #1c2f6c;
  --hemiciclo-publico: #24418f;
  --hemiciclo-corredor: #172a60;
  --hemiciclo-piso: #2246a2;
  --hemiciclo-borda-do-carpete: #1b3a8a;
  --hemiciclo-muro: #0e1430;
  --hemiciclo-parede: #172f72;
  --hemiciclo-painel: #6fa0ff;
  --hemiciclo-plataforma: #3561c8;
  --hemiciclo-rampa: #2b55b9;
  --hemiciclo-nicho: #16306f;
  --hemiciclo-madeira: #8f4a24;
  --hemiciclo-bancada: #8a4421;
  --hemiciclo-borda-da-bancada: #3f1b0b;
  --hemiciclo-terminal: #101216;
  --hemiciclo-frente-da-mesa: #13245a;
  --hemiciclo-fundo-dos-tubos: #0b1430;
  --hemiciclo-tubo: #c9ced6;
  --hemiciclo-losango: #7ea3f2;
  --hemiciclo-cadeira: #2f5fd0; /* sem ninguém: o azul capitonê do Senado */
  --hemiciclo-vazia: rgb(255 255 255 / 0.5);
}

.hemiciclo svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Compacta (o recipiente estreito): sem a galeria, a planta corta no muro do plenário. */
.hemiciclo--compacta svg {
  overflow: hidden;
}

.hemiciclo--compacta .hemiciclo__galeria,
.hemiciclo--compacta .hemiciclo__parede-da-galeria {
  display: none;
}

/* ================================================================ a sala */
.hemiciclo__galeria-piso { fill: var(--hemiciclo-galeria); }
.hemiciclo__corredor { fill: var(--hemiciclo-corredor); }

.hemiciclo__degrau {
  fill: none;
  stroke: var(--hemiciclo-degrau);
  stroke-width: 0.06;
}

.hemiciclo__publico {
  fill: none;
  stroke: var(--hemiciclo-publico);
  stroke-width: 0.34;
}

.hemiciclo__borda-do-carpete {
  fill: none;
  stroke: var(--hemiciclo-borda-do-carpete);
  stroke-width: 0.5;
}

.hemiciclo__microfone { fill: var(--hemiciclo-microfone); }

.hemiciclo__piso { fill: var(--hemiciclo-piso); }

.hemiciclo__muro {
  fill: none;
  stroke: var(--hemiciclo-muro);
  stroke-width: 0.3;
}

.hemiciclo__parede {
  fill: none;
  stroke: var(--hemiciclo-parede);
  stroke-width: 0.45;
  stroke-linecap: round;
}

.hemiciclo__painel {
  fill: none;
  stroke: var(--hemiciclo-painel);
  stroke-width: 0.22;
  stroke-linecap: round;
}

.hemiciclo__rampa { fill: var(--hemiciclo-rampa); }
.hemiciclo__plataforma { fill: var(--hemiciclo-plataforma); }
.hemiciclo__nicho { fill: var(--hemiciclo-nicho); }
.hemiciclo__losango {
  fill: none;
  stroke: var(--hemiciclo-losango);
  stroke-width: 0.09;
}
.hemiciclo__fundo-dos-tubos { fill: var(--hemiciclo-fundo-dos-tubos); }
.hemiciclo__tubo { fill: var(--hemiciclo-tubo); }
.hemiciclo__quadrado--verde { fill: var(--hemiciclo-verde); }
.hemiciclo__quadrado--amarelo { fill: var(--hemiciclo-amarelo); }
.hemiciclo__madeira { fill: var(--hemiciclo-madeira); }
.hemiciclo__frente-da-mesa { fill: var(--hemiciclo-frente-da-mesa); }
.hemiciclo__tampo-escuro { fill: var(--hemiciclo-terminal); }
.hemiciclo__terminal { fill: var(--hemiciclo-terminal); }
.hemiciclo__bandeira { fill: var(--hemiciclo-bandeira); }

.hemiciclo__bancada {
  fill: var(--hemiciclo-bancada);
  stroke: var(--hemiciclo-borda-da-bancada);
  stroke-width: 0.05;
}

.hemiciclo__cadeira-da-mesa { fill: var(--hemiciclo-cadeira); }

/* ================================================================ as cadeiras */
.hemiciclo__cadeira {
  fill: var(--hemiciclo-cadeira);
  transform-box: fill-box;
  transform-origin: center;
  transition:
    fill var(--duracao-3) var(--curva-padrao),
    opacity var(--duracao-3) var(--curva-padrao),
    transform var(--duracao-4) var(--curva-mola);
}

.hemiciclo__cadeira > path {
  stroke: var(--hemiciclo-contorno);
  stroke-width: 0.8px;
  vector-effect: non-scaling-stroke;
}

/* O encosto, um tom abaixo do assento, na cor de quem senta. */
.hemiciclo__cadeira > .hemiciclo__sombra-do-encosto {
  fill: rgb(0 0 0 / 0.3);
  stroke: none;
}

/* NPC: cadeira sem jogador. Mesmo lugar, um pouco mais apagada. */
.hemiciclo__cadeira--npc {
  opacity: 0.8;
}

/* Muitas cadeiras: miúdas, sem o contorno, que apagaria a cor. */
.hemiciclo--miuda .hemiciclo__cadeira > path {
  stroke: none;
}

/* Em repouso: cor do partido. */
.hemiciclo__cadeira[data-partido="1"] { fill: var(--cor-partido-1); }
.hemiciclo__cadeira[data-partido="2"] { fill: var(--cor-partido-2); }
.hemiciclo__cadeira[data-partido="3"] { fill: var(--cor-partido-3); }
.hemiciclo__cadeira[data-partido="4"] { fill: var(--cor-partido-4); }
.hemiciclo__cadeira[data-partido="5"] { fill: var(--cor-partido-5); }
.hemiciclo__cadeira[data-partido="6"] { fill: var(--cor-partido-6); }
.hemiciclo__cadeira[data-partido="7"] { fill: var(--cor-partido-7); }
.hemiciclo__cadeira[data-partido="8"] { fill: var(--cor-partido-8); }

/* Votação aberta: quem falta votar fica com a cor da Casa, como no 3D, e quem votou, com a cor do voto. */
.hemiciclo[data-votacao] .hemiciclo__cadeira {
  fill: var(--hemiciclo-cadeira);
  opacity: 1;
}

.hemiciclo[data-votacao] .hemiciclo__cadeira[data-voto] {
  transform: scale(1.12);
}

.hemiciclo[data-votacao] .hemiciclo__cadeira[data-voto="sim"] { fill: var(--cor-voto-sim); }
.hemiciclo[data-votacao] .hemiciclo__cadeira[data-voto="nao"] { fill: var(--cor-voto-nao); }
.hemiciclo[data-votacao] .hemiciclo__cadeira[data-voto="abstencao"] { fill: var(--cor-voto-abstencao); }
.hemiciclo[data-votacao] .hemiciclo__cadeira[data-voto="votou"] { fill: var(--cor-voto-secreto); }

/* Quem faltou: a cadeira vazia, só o contorno. */
.hemiciclo[data-votacao] .hemiciclo__cadeira[data-voto="ausente"],
.hemiciclo[data-votacao] .hemiciclo__cadeira[data-voto="obstrucao"] {
  fill: transparent;
  transform: scale(0.9);
}

.hemiciclo[data-votacao] .hemiciclo__cadeira[data-voto="ausente"] > path {
  stroke: var(--hemiciclo-vazia);
  stroke-width: 1px;
}

.hemiciclo[data-votacao] .hemiciclo__cadeira[data-voto="obstrucao"] > path {
  stroke: var(--cor-alerta);
  stroke-width: 1.2px;
  stroke-dasharray: 3 2;
}

.hemiciclo[data-votacao] .hemiciclo__cadeira[data-voto="ausente"] > .hemiciclo__sombra-do-encosto,
.hemiciclo[data-votacao] .hemiciclo__cadeira[data-voto="obstrucao"] > .hemiciclo__sombra-do-encosto {
  fill: transparent;
}

/* Quem está na sala agora (o plenário ao vivo): o contorno claro, também na cadeira de quem não votou. */
.hemiciclo .hemiciclo__cadeira.hemiciclo__cadeira--presente > path {
  stroke: #fff;
  stroke-width: 1.6px;
  stroke-dasharray: none;
}

.hemiciclo .hemiciclo__cadeira.hemiciclo__cadeira--presente > .hemiciclo__sombra-do-encosto {
  stroke: none;
}

/* Destaque (ex.: "esta cadeira pode ser sua"): a cadeira dourada, que pulsa. */
.hemiciclo__cadeira--destaque {
  fill: var(--cor-ouro) !important;
  opacity: 1;
  animation: cadeira-destaque 2.4s var(--curva-padrao) infinite;
}

.hemiciclo__cadeira--destaque > path {
  stroke: #fff;
  stroke-width: 1.2px;
}

@keyframes cadeira-destaque {
  0%,
  100% {
    transform: scale(1.1);
  }

  50% {
    transform: scale(1.6);
  }
}

.hemiciclo__cadeira:hover {
  transform: scale(1.35);
}

.hemiciclo[data-interativo] .hemiciclo__cadeira {
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .hemiciclo__cadeira--destaque {
    animation: none;
    transform: scale(1.3);
  }
}