/* Espaçamento maior do .main só é aplicado em telas largas. Em telas
   estreitas isso sobrescrevia o padding-top: 76px que o layout.css reserva
   para o botão hambúrguer fixo, fazendo o título "Usuários autorizados"
   ficar embaixo do botão antes de abrir o menu. */
@media (min-width: 981px) {
  .main {
    padding: 32px 40px;
  }
}

.card {
      background: var(--surface-strong);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 24px;
    }

.admin-form {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin-bottom: 20px;
    }

.admin-form .full {
      grid-column: 1 / -1;
    }

.cargos-check {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
    }

.cargos-check label {
      display: flex;
      align-items: center;
      gap: 6px;
      font-weight: 500;
      color: var(--text);
      margin-bottom: 0;
    }

.row-actions {
      display: flex;
      gap: 8px;
    }

.row-actions button {
      font-size: 12px;
      padding: 6px 10px;
    }

.cargo-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 4px 6px 4px 12px;
      border-radius: 999px;
      background: var(--surface);
      border: 1px solid var(--border);
      font-size: 13px;
      font-weight: 500;
      color: var(--text);
    }

.cargo-pill.locked {
      opacity: .85;
    }

.cargo-pill button {
      border: none;
      background: transparent;
      color: var(--muted);
      cursor: pointer;
      font-size: 14px;
      line-height: 1;
      padding: 4px 6px;
      border-radius: 999px;
    }

.cargo-pill button:hover {
      color: var(--error);
      background: var(--primary-soft);
    }