/* Painéis laterais (Equipe, Régua), confirmação e a dica da régua nos cabeçalhos. */
dialog { color: var(--texto); }
dialog::backdrop { background: rgb(9 59 106 / 0.5); }

.painel {
  position: fixed; inset: 0 0 0 auto;
  width: min(520px, 100vw); height: 100vh; height: 100dvh; max-height: none; max-width: 100vw;
  margin: 0; padding: 0; border: 0;
  background: var(--fundo);
  box-shadow: -8px 0 32px rgb(9 59 106 / 0.25);
}
.painel[open] { display: flex; flex-direction: column; animation: painel-entra var(--tempo-painel) var(--curva-saida); }
.painel-form { display: flex; flex-direction: column; min-height: 0; flex: 1; }
@keyframes painel-entra { from { transform: translateX(32px); opacity: 0; } }

.painel-topo {
  display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  background: var(--superficie); border-bottom: 1px solid var(--linha);
}
.painel-topo h2 { font-size: var(--tam-4); color: var(--texto-forte); }
.painel-corpo { flex: 1; min-height: 0; overflow: auto; padding: var(--esp-4); display: grid; gap: var(--esp-3); align-content: start; }
.painel-rodape { padding: var(--esp-3) var(--esp-4); background: var(--superficie); border-top: 1px solid var(--linha); }
.painel-rodape .botao { width: 100%; }
.painel-nota { color: var(--texto-suave); font-size: var(--tam-1); }
.painel-nota:empty { display: none; }
.painel-sub { font-size: var(--tam-2); color: var(--texto-forte); margin-top: var(--esp-2); }

.aviso-fixo {
  display: flex; align-items: center; gap: var(--esp-2);
  padding: var(--esp-3) var(--esp-4);
  background: var(--negativo-tom); color: var(--coral-700);
  border-bottom: 1px solid var(--coral-700);
  font-weight: 700;
}
.aviso-fixo svg { flex: none; }

/* ---- Equipe ---- */
.equipe-incluir { display: grid; gap: var(--esp-2); font-weight: 600; color: var(--texto-forte); }
.equipe-incluir-linha { display: flex; gap: var(--esp-2); }
.equipe-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-2); }
.equipe-lista:empty::before { content: "Ninguém por aqui."; color: var(--texto-suave); font-size: var(--tam-1); }
.equipe-item { display: grid; gap: var(--esp-1); padding-bottom: var(--esp-3); border-bottom: 1px solid var(--linha); }
.equipe-linha { display: flex; gap: var(--esp-2); align-items: center; }
.equipe-linha .campo { flex: 1; min-width: 0; }
.equipe-linha .botao { flex: none; }
.equipe-extras { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-1) var(--esp-4); font-size: var(--tam-1); color: var(--texto-suave); }
.equipe-pub { display: inline-flex; align-items: center; gap: var(--esp-2); min-height: var(--alvo-minimo); color: var(--texto-forte); font-weight: 600; }
.equipe-pub input { width: 22px; height: 22px; margin: 0; }
.equipe-saiu { font-weight: 600; }
.equipe-item .botao--discreto { min-height: var(--alvo-minimo); }
.equipe-item--inativo .campo { color: var(--texto-suave); background: var(--superficie-suave); }

/* ---- Régua ---- */
.regua-item {
  display: grid; gap: var(--esp-2);
  margin: 0; padding: var(--esp-3);
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-2);
}
.regua-item legend { padding: 0 var(--esp-2); font-weight: 700; color: var(--texto-forte); }
.regua-item label { display: grid; gap: 4px; font-size: var(--tam-1); font-weight: 600; color: var(--texto-suave); }

/* ---- Confirmação ---- */
.dialogo {
  width: min(440px, calc(100vw - 32px)); padding: var(--esp-5);
  border: 0; border-radius: var(--raio-3);
  background: var(--superficie); box-shadow: 0 16px 48px rgb(9 59 106 / 0.35);
}
.dialogo[open] { animation: dialogo-entra 200ms var(--curva-saida); }
@keyframes dialogo-entra { from { transform: scale(0.96); opacity: 0; } }
.dialogo h2 { font-size: var(--tam-4); color: var(--texto-forte); margin-bottom: var(--esp-2); }
.dialogo p { color: var(--texto); }
.dialogo-botoes { display: flex; justify-content: flex-end; gap: var(--esp-2); margin-top: var(--esp-5); flex-wrap: wrap; }

/* ---- Dica da régua (nos cabeçalhos dos critérios) ---- */
.regua-pop {
  position: fixed; z-index: 60; width: min(320px, calc(100vw - 24px));
  padding: var(--esp-3) var(--esp-4);
  background: var(--marinho-900); color: var(--neutro-0);
  border-radius: var(--raio-2); box-shadow: 0 8px 28px rgb(9 59 106 / 0.35);
  font-size: var(--tam-1); line-height: 1.4;
}
.regua-pop[hidden] { display: none; }
.regua-pop h3 { font-size: var(--tam-2); margin-bottom: 4px; }
.regua-pop dl { margin: var(--esp-2) 0 0; display: grid; gap: 4px; }
.regua-pop dt { font-weight: 700; display: inline; }
.regua-pop dd { margin: 0; display: inline; }
.regua-pop .pendente { font-style: italic; }

@media (max-width: 600px) {
  .painel { width: 100vw; }
}