/* Cargos, atribuição e regras de sala (PC-025/PC-026).
   Folha própria para não disputar linhas com o style.css. Só usa as variáveis do
   :root; nada aqui mexe nos seletores do modal (#dlg-admin) além do que é nosso. */

.cargos-sub {
  display: flex; gap: 6px; margin: 0 0 10px; padding: 4px;
  background: var(--painel-3); border-radius: var(--raio-p); width: fit-content; max-width: 100%;
}
.cargos-sub[hidden] { display: none; }
.cargos-sub-aba {
  background: transparent; border: 0; color: var(--texto-medio); font: inherit; font-size: 13px;
  padding: 7px 14px; border-radius: 8px; cursor: pointer;
}
.cargos-sub-aba[aria-selected="true"] { background: var(--azul); color: var(--creme); }
.cargos-sub-aba:focus-visible { outline: 2px solid var(--azul-suave); outline-offset: 2px; }

.cargos-ui[hidden], .regras-ui[hidden] { display: none; }
.cargos-ui { display: block; min-width: 0; }
.cargos-ui h3, .regras-ui h3 { margin: 16px 0 8px; }
.cargos-ui input[type="text"], .cargos-ui input[type="search"] { width: 100%; box-sizing: border-box; }

.cargos-migalhas { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 0 12px; font-size: 13px; }
.cargos-voltar { padding: 4px 8px; font-size: 13px; }
.cargos-sep { color: var(--texto-fraco); }
.cargos-atual { color: var(--creme); font-weight: 600; }

.cargo-cor {
  display: inline-block; width: 12px; height: 12px; border-radius: 50%;
  margin-right: 6px; vertical-align: middle; flex: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
}
.cargo-selo {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 11px;
  background: var(--painel-3); color: var(--texto-medio); border: 1px solid var(--borda-forte);
}
.cargo-selo-admin { color: #F3D58B; border-color: rgba(232, 184, 74, .5); }
.cargos-lista li { align-items: center; }
.cargos-seta { min-width: 32px; }

.cargos-aviso {
  margin: 8px 0; padding: 9px 12px; border-radius: var(--raio-p); font-size: 13px;
  background: rgba(232, 163, 61, .12); border: 1px solid rgba(232, 163, 61, .4); color: #F1D7A4;
}
.cargos-aviso[hidden] { display: none; }
.cargos-confirma {
  margin: 10px 0; padding: 10px 12px; border-radius: var(--raio-p);
  background: var(--painel-3); border: 1px solid var(--borda-forte);
}
.cargos-confirma[hidden] { display: none; }
.cargos-confirma p { margin: 0 0 8px; font-size: 14px; }
.cargos-perdidas { margin: 0 0 8px; padding-left: 18px; font-size: 13px; color: var(--texto-medio); }
.cargos-acoes { margin-top: 14px; flex-wrap: wrap; gap: 8px; }

/* Permissões agrupadas */
.cargos-permissoes { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.cargos-grupo, .regra-cartao {
  margin: 0; padding: 8px 12px 10px; border: 1px solid var(--borda); border-radius: var(--raio-p);
  background: var(--painel-2); min-width: 0;
}
.cargos-grupo[hidden] { display: none; }
.cargos-grupo legend, .regra-cartao legend { padding: 0 6px; font-weight: 600; font-size: 13px; color: var(--azul-suave); }
.cargos-perm { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; border-top: 1px solid var(--borda); }
.cargos-perm:first-of-type { border-top: 0; }
.cargos-perm[hidden] { display: none; }
.cargos-perm input { margin-top: 3px; flex: none; }
.cargos-perm label { display: flex; flex-direction: column; gap: 1px; cursor: pointer; min-width: 0; }
.cargos-perm label strong { font-size: 14px; font-weight: 600; }
.cargos-perm label .dica { font-size: 12px; margin: 0; }
.cargos-perm.bloqueada { opacity: .6; }
.cargos-perm.bloqueada label { cursor: not-allowed; }

/* Atribuição */
.cargos-marcas { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.cargos-marca {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--raio-p);
  background: var(--painel-2); border: 1px solid var(--borda); cursor: pointer; font-size: 14px;
}
.cargos-marca.bloqueada { opacity: .6; cursor: not-allowed; }
.cargos-posse { margin-top: 14px; }

/* Efetivas e origem */
.cargos-efetivas { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.cargos-efetiva {
  display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 2px 10px; padding: 5px 0;
  border-top: 1px solid var(--borda); font-size: 13px; align-items: baseline;
}
.cargos-efetiva:first-of-type { border-top: 0; }
.cargos-efetiva .dica { grid-column: 2; margin: 0; font-size: 12px; }
.cargos-estado { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; text-align: center; }
.cargos-efetiva.sim .cargos-estado { background: rgba(70, 201, 138, .16); color: var(--verde); }
.cargos-efetiva.nao .cargos-estado { background: rgba(224, 108, 90, .16); color: #F0A89A; }

/* Regras Herdar / Permitir / Negar */
.regras-ui { margin-top: 18px; padding-top: 6px; border-top: 1px solid var(--borda-forte); }
.regras-alvos { display: flex; flex-direction: column; gap: 10px; margin: 8px 0; }
.regra-cartao.salvando { opacity: .7; }
.regra-linha {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 7px 0;
  border-top: 1px solid var(--borda);
}
.regra-linha:first-of-type { border-top: 0; }
.regra-rotulo { flex: 1 1 180px; display: flex; flex-direction: column; min-width: 0; }
.regra-rotulo strong { font-size: 14px; font-weight: 600; }
.regra-rotulo .dica { margin: 0; font-size: 12px; }
.regra-op {
  display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 8px;
  border: 1px solid var(--borda-forte); font-size: 12px; cursor: pointer; background: var(--painel-3);
}
.regra-op input { position: absolute; opacity: 0; pointer-events: none; }
.regra-op:has(input:checked).regra-herdar { background: var(--painel); color: var(--creme); border-color: var(--texto-fraco); }
.regra-op:has(input:checked).regra-permitir { background: rgba(70, 201, 138, .2); border-color: var(--verde); color: var(--verde); }
.regra-op:has(input:checked).regra-negar { background: rgba(224, 108, 90, .2); border-color: var(--vermelho); color: #F0A89A; }
.regra-op:has(input:focus-visible) { outline: 2px solid var(--azul-suave); outline-offset: 2px; }
.regra-op:has(input:disabled) { opacity: .55; cursor: not-allowed; }

@media (max-width: 600px) {
  .cargos-efetiva { grid-template-columns: 70px minmax(0, 1fr); }
  .regra-linha { gap: 4px 6px; }
  .regra-rotulo { flex-basis: 100%; }
  .cargos-lista li { flex-wrap: wrap; }
}

/* O rótulo global tem margem e recuo próprios: aqui o texto cola na caixa. */
.cargos-perm label, .cargos-marca, .regra-op { margin: 0; }
.cargos-perm label { padding: 0; }
.cargos-ui label[for="cargo-nome"], .cargos-ui label[for="cargo-descricao"] { display: block; margin: 12px 0 4px; }